如何防止按键输入出现在输入字段中？

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

使用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 2

更新

您可以存储焦点在输入中时的值。

当用户输入有效百分比（仅限整数）时，替换存储的值。当输入不正确时，只需用旧值替换即可。

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

我把 cmets 放在那里，应该是不言自明的。我使用正则表达式将输入与百分比进行匹配。