如何在可编辑框中禁用％

如何在内容可编辑框中禁用%，以便用户不能更改它。我有一个表格，其中有一个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: '%'; 
}

小提琴输出

来源

2016-04-14 Sam

您可以直接在CSS中使用:after。

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

jsfiddle

来源

2016-04-14 16:40:15

上述增加的内容框一个额外的行 – Sam

请参阅问题 – Sam

屏幕截图它为我工作：[链接]（https://jsfiddle.net/qrk8a5h9/ ）。你能在链接中正确看到它吗？ –

如何在可编辑框中禁用％

回答

相关问题