只允许在输入文本框中输入数字

2022-01-13 00:00:00 input numbers textbox html

我有一个数字输入文本框，我想允许用户编辑但不想让用户输入除数字以外的任何其他文本.我希望他们只能使用数字输入框上的箭头.

 解决方案 你可以通过纯 JavaScript 来实现.创建可以在脚本中重复使用的函数.
函数allowNumbersOnly(e) {var 代码 = (e.which) ?e.which : e.keyCode;if (代码 > 31 && (代码 < 48 || 代码 > 57)) {e.preventDefault();}}
您最好调用此 onkeypress 事件处理程序.
<input type="text" id="onlyNumbers" onkeypress="allowNumbersOnly(event)"/>
function allowNumbersOnly(e) {var 代码 = (e.which) ?e.which : e.keyCode;if (代码 > 31 && (代码 < 48 || 代码 > 57)) {e.preventDefault();}}
<!DOCTYPE html><html><头><meta charset="utf-8"><title>JS斌</title></头><身体>尝试在我中<input type="text" id="onlyNumbers" onkeypress="allowNumbersOnly(event)"/></身体></html>
<小时>但是，我建议使用不显眼的方式编写 JS，因为这样可以很好地保持 HTML 语义并远离污染.您可以在事件处理程序上执行我们将使用 vanilla JavaScript 或 jQuery 附加到此文本框的函数.
function allowNumbersOnly(e) {var 代码 = (e.which) ?e.which : e.keyCode;if (代码 > 31 && (代码 < 48 || 代码 > 57)) {e.preventDefault();}}//使用经典的 addEventListener 方法:document.getElementById('onlyNumbers').addEventListener('keypress', function(e){ allowNumbersOnly(e);}， 错误的);//使用jQuery$(函数(){$('#onlyNumbers2').keypress(function(e) {allowNumbersOnly(e);});});
<!DOCTYPE html><html><头><meta charset="utf-8"><title>JS斌</title><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script></头><身体>
使用 addEventListener: <input type="text" id="onlyNumbers"/></div>
使用 jQuery:<input type="text" id="onlyNumbers2"/></div></身体></html>
要限制每个字符，您只需使用 e.preventDefault().
此外，您也可以使用 return false 代替，但在这种情况下 preventDefault() 更好，应该明智地选择 return false.很高兴知道两者的区别.
I have a number input text box and I want to allow the user to edit but do not want to allow the user to enter any other text except numbers. I want them only to be able to use the arrows on the number input box.
 <input type = "number" min="0" max="10" step="0.5"  input id="rating"   name = "rating" class = "login-input" placeholder = "Rating 1-5:" value="0">

 解决方案 You can achieve this by pure JavaScript. Create this function that you can reuse in your script.
function allowNumbersOnly(e) {
    var code = (e.which) ? e.which : e.keyCode;
    if (code > 31 && (code < 48 || code > 57)) {
        e.preventDefault();
    }
}
You may preferably call this onkeypress event handler.
<input type="text" id="onlyNumbers" onkeypress="allowNumbersOnly(event)" />


function allowNumbersOnly(e) {
    var code = (e.which) ? e.which : e.keyCode;
    if (code > 31 && (code < 48 || code > 57)) {
        e.preventDefault();
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    Try editing in me:
    <input type="text" id="onlyNumbers" onkeypress="allowNumbersOnly(event)" />
</body>
</html>







However, I would recommend the unobtrusive style of writing JS using because it is good to keep the HTML semantic and away from pollution. You can execute the function on event handler that we would attach to this text box using vanilla JavaScript or jQuery.



function allowNumbersOnly(e) {
    var code = (e.which) ? e.which : e.keyCode;
    if (code > 31 && (code < 48 || code > 57)) {
        e.preventDefault();
    }
}

// using classic addEventListener method:
document.getElementById('onlyNumbers').addEventListener('keypress', function(e){    allowNumbersOnly(e);
}, false);

//using jQuery
$(function(){
    $('#onlyNumbers2').keypress(function(e) {
       allowNumbersOnly(e); 
    });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
    <div>
      Using addEventListener: <input type="text" id="onlyNumbers" />
    </div>
    
    <div>
      Using jQuery: <input type="text" id="onlyNumbers2" />
    </div>
</body>
</html>





To restrict every character you can just simply use e.preventDefault().

Besides, you can also use return false instead but preventDefault() is better in this case and return false should be chosen wisely. It is good to know the difference between both of them.


	
		相关文章