condent編集可能ボックスの％を無効にする方法

%をコンテンツ編集可能ボックスで無効にして、ユーザーが変更できないようにする方法。私はtdに内容編集可能なボックスを持つテーブルを持っています。ユーザーが値を入力すると、%記号には影響を与えてはならず、無効にする必要があります。これを行う方法？プロパティの後にCSSを使用しcondent編集可能ボックスの％を無効にする方法

<!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>

私は値を変更しようとしていながら、TDに余分な行を追加します。図は

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

フィドル出力あなたは、単にCSSで:afterを使用することができます

出典

2016-04-14 Sam

装着されています。

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

jsfiddle

出典

2016-04-14 16:40:15

は、上記 – Sam

それは私の作品質問 – Sam

でスクリーンショットを参照してくださいコンテンツボックス内の余分な行を追加します：[リンク]（https://jsfiddle.net/qrk8a5h9/ ）。あなたはリンクでそれを正しく見ることができますか？ –

condent編集​​可能ボックスの％を無効にする方法

答えて

関連する問題

condent編集可能ボックスの％を無効にする方法