Как отключить% в разрешаемом редакторе поле

Как отключить % в редакторе содержимого, чтобы пользователь не мог его изменить. У меня есть таблица, которая имеет редактируемую область содержимого в 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 после свойство добавляет дополнительную строку в то время как тд я пытаюсь изменить значение. Рисунок прилагается

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

выход Fiddle

источник

2016-04-14 Sam

Вы можете просто использовать :after в CSS.

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

jsfiddle

источник

2016-04-14 16:40:15

выше добавляет дополнительную строку в поле контента – Sam

Пожалуйста, смотрите снимок экрана в вопросе – Sam

это работает для меня: [ссылка] (https://jsfiddle.net/qrk8a5h9/). Вы видите это правильно в ссылке? –

Как отключить% в разрешаемом редакторе поле

ответ

Смежные вопросы