как предотвратить ввод ключа в поле ввода?

Question

Я пытаюсь подтвердить ввод пользователя в поле ввода текста.

Я написал функцию javascript для той же цели, которая запускает событие onkeyup.

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

Функция работает нормально, но если ввести недопустимый символ, скажем 'a', он будет мигать в поле ввода перед удалением.

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

Вот мой код:

function validatePercent(event) {
    var txt = $("#tds_input").val();
    //  alert(event.source);
    if (!parseInt(txt)) {
        $("#tds_input").val('');
    }
    if (isNaN(txt / 1)) {
        txt = txt.substr(0, txt.length - 1);
        $("#tds_input").val(txt);
    }
    if (txt > 100) {
        //alert(2);
        txt = txt.toString();
        txt = txt.substr(0, txt.length - 1);
        $("#tds_input").val(txt);

    }
    txt = txt.toString();
    if (txt.indexOf('.') > -1) {
        if (txt.substr(txt.indexOf('.') + 1, txt.length).length > 1) {
            txt = txt.substr(0, txt.length - 1);
            $("#tds_input").val(txt);
        }
    }
}

Answer 1

ОБНОВЛЕНО

Можно сохранить значение, когда фокус находится на входе.

Когда пользователь вводит правильный процент (только целое число), заменитезначение сохраняется.Если ввод неправильный, просто замените старым значением.

var decimalSeparator = 1.1.toLocaleString().replace(/\d/g, ''),
     
    pattern1 = "^(\\d{1,3})?([",
    
    pattern2 = "]?\\d{1})?$",
    
    regex = new RegExp(pattern1+decimalSeparator+pattern2),

		resetContent = function () {
											$('#tds_input').val($('#tds_input').data('val'));
									}, 
                  
    matchRegex = function (value) {
					return value.match(regex);
		};

$('#tds_input').bind('focusin', (e) => {
	$('#tds_input').data('val', $('#tds_input').val());
});


// handle input (keys, paste)
$('#tds_input').bind('input', (e) => {

  let txtValue = $('#tds_input').val();
  
  // input is empty
  if (txtValue === "") {
  	$('#tds_input').data('val', "");
    return;
  }

  // value does not match regex
  if (!matchRegex(txtValue)) {
    // maybe it ends with the decimal character?
    if (txtValue[txtValue.length - 1] === "." && txtValue !== "100.") {
    	
      // simulate the user enters a decimal next
      if (matchRegex(txtValue + "1")) {
			    $('#tds_input').data('val', txtValue);
          return;
      }
    } 
    resetContent();
    return;
  }
  
  // check between 0 and 100
  let value = parseFloat(txtValue);
	
  if (value >= 0 && value <= 100) {
  
    // store new valid number
    $('#tds_input').data('val', value);
    // put the value as an integer in the input
    
    $('#tds_input').val(value);
    return;
  } else resetContent();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tds_input"/>

Answer 2

Использование type=number (а не text) может помочь

function validatePercent(event)
 {     
  var txt=$("#tds_input").val();
    if(!parseInt(txt))
    {
        $("#tds_input").val('');
    }
   if(isNaN(txt/1))
   {
    txt=txt.substr(0,txt.length-1);
      $("#tds_input").val(txt);
   }
  if(txt>100)
  { 
      txt=txt.toString();
      txt=txt.substr(0,txt.length-1);
      $("#tds_input").val(txt);

  }
  txt=txt.toString();
  if(txt.indexOf('.')>-1)
  {
      if(txt.substr(txt.indexOf('.')+1,txt.length).length>1){
      txt=txt.substr(0,txt.length-1);    
      $("#tds_input").val(txt);
  }
  }

 }

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id = "tds_input" onkeyup="validatePercent()">

Answer 3

Вот что-то, что работает:

$("#tds_input").on("keydown", validatePercent)

function validatePercent(e) {
  // if key is backspace, arrow, etc, exit here
  if (e.originalEvent.key.length > 1) return;
  // compose new value
  var val = $("#tds_input").val();
  if (val.length == 0) val = e.originalEvent.key;
  else {
    val = val.split('');
    val.splice(e.target.selectionStart, 0, e.originalEvent.key);
    val = val.join('');
  }
  // if value is ok, exit here
  if (val.match(/^\d{1,3}\.?\d?$/) && parseFloat(val) <= 100) return;
  // stop event
  e.preventDefault();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="tds_input">

Я положил туда комментарии, это должно быть довольно понятно.Я использовал регулярное выражение для сопоставления ввода с процентами.