只允许在输入文本框中输入数字
时间：2023-08-07问题描述
我有一个数字输入文本框，我想允许用户编辑但不想让用户输入除数字以外的任何其他文本.我希望他们只能使用数字输入框上的箭头.
你可以通过纯 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.
这篇关于只允许在输入文本框中输入数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！
相关文章
html2canvas 捕获除内部画布内容之外的所有内容html2canvas captures everything except the content of an inner canvas(html2canvas 捕获除内部画布内容之外的所有内容)- 显示离线 OSM 映射文件.建议:一个带有 Js.library 的Showing an offline OSM map file. Suggestion: an MB Tiles file with Js.library(显示离线 OSM 映射文件.建议:一个带有 Js.library 的 MB Tiles
- 单击传单标记会将您带到 URLClicking a leaflet marker takes you to URL(单击传单标记会将您带到 URL)
- 为传单中的标记分配 IDAssign ID to marker in leaflet(为传单中的标记分配 ID)
- 在图层控件中设置 Leaflet Overlay OffSet Leaflet Overlay Off in the Layer Control(在图层控件中设置 Leaflet Overlay Off)
- z-index 未按预期工作z-index not working as intended(z-index 未按预期工作)