Текстовое поле для ограничения, кроме (+ -0-9%)

Question

Имея сценарий, в котором текстовое поле может принять следующее, 10,+10,-10,+10.00,-10.00,+10.00%,-10.00%.

Я могу проверить шаблон, используя RegEx pattern="[-+]?[0-9]+(\.[0-9]{0,4})?%?".

Но требуется ограничить использование пользователем неправильных символов в самом поле, а не выдавать ошибку.

Угловая версия - 1.6

Answer 1

Я бы сам просто сделал это простым способом и использовал бы,

<input type="number" min="-10" max="10" />

, а затем просто укажите пользователю, что он вставляет проценты в это поле.хорошо работает и для мобильных пользователей.

В противном случае я бы, вероятно, построил бы какой-нибудь конечный автомат и построил бы структуру json для различных решений.затем просто запустите его на регулярном выражении.

document.getElementById('input').addEventListener('keydown',function(event){
  event.preventDefault();
  var stateTree = {
   0 : ['-','+','[0-9]'],
   ... //  basicly declare here possible regexp's per length
   5 : ['[+|-]10\.0']  // could be doing quiet specific one's
  };

  var text = this.value +''+ event.key;
  var array = stateTree[text.length];
  array.map( function(item){
    const match = new RegExp(item, 'g');
    if( text.match(match) ){ this.value = text }
  });

})