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

2023-03-17前端开发问题

本文介绍了只允许在输入文本框中输入数字的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

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

解决方案

你可以通过纯 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.

                        这篇关于只允许在输入文本框中输入数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
The End

相关推荐

如何使用百度地图API获取地理位置信息

layui 实现实时刷新一个外部的div

layui要如何改变时间日历布局大小？

JavaScript小数运算出现多位的解决办法

jQuery怎么动态向页面添加代码？

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

热门文章

热门精品源码

最新VIP资源