如何在可編輯框中禁用％

如何在內容可編輯框中禁用%，以便用戶不能更改它。我有一個表格，其中有一個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/ ）。你能在鏈接中正確看到它嗎？ –

如何在可編輯框中禁用％

回答

相關問題