如何在内容可编辑框中禁用 %答案

【问题标题】：How to disable % in the condent editable box如何在内容可编辑框中禁用 %
【发布时间】：2016-04-14 16:32:00
【问题描述】：

如何在内容可编辑框中禁用%，以便用户无法更改它。我有一个表格，在td 中有一个内容可编辑框。当用户在其中输入值时，% 符号不应该受到影响并且必须被禁用。如何做到这一点？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
   <div class="col-sm-6" style="background-color:lavender;">

<table class="table table-bordered table-hover table-sm" id="t02">
      <thead style="text-align:center">
         <tr>
            <th class="col-md-6" style="text-align:center">Discounts</th>
            <th class="col-md-1"></th>
            <th class="col-md-1"></th>
            <th class="col-md-2" style="text-align:center">%</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <th>XXX</th>
            <td></td>
            <td></td>
            <td style="text-align:right" id="xxxDiscount">0.00%</td>
         </tr>
         <tr  class="active">
            <th>YYY</th>
            <td></td>
            <td></td>
            <td style="text-align:right">
              <select id="pip-list">
              <option value=""></option>
              </select>
            </td>
         </tr>
          <tr class="active">
            <th>ZZZZ</th>
            <td></td>
            <td></td>
            <td style="text-align:right">
              <select id="abc-list">
              <option value=""></option>
              </select>
            </td>
         </tr>
         <tr  class="active">
            <th>Discount</th>
            <td></td>
            <td></td>
            <td style="text-align:right" id="discount" contenteditable="true">
              0%
            </td>
         </tr>
         <tr>
            <th style="color:blue" style="text-align:right">Total Discount</th>
            <td></td>
            <td></td>
            <td style="text-align:right" id="secondTableTotal">
              0.00%
            </td>       
        </tr>
      </tbody>
    </table>
    </div>
    </html>

在我尝试更改值时，在属性后使用 css 会在 td 中添加额外的一行。图附上

#discount::after {
    content: '%';
}

小提琴输出

【问题讨论】：

标签： javascript jquery html css contenteditable

【解决方案1】：

您可以在 css 中简单地使用 :after。

#discount::after {
    content: '%';
}

jsfiddle

【讨论】：

以上在内容框中多加了一行
请看问题中的截图
它对我有用：link。你能在链接中正确看到它吗？
也不适合你。还在小提琴中添加了一条额外的线。用小提琴输出编辑了问题
您使用的是什么浏览器（名称+版本）？