是否可以限制 HTML5/JavaScript 中某些字符的输入？例如，我是否可以在屏幕上有一个输入文本框，如果用户尝试在其中输入一个字母，它不会显示在框中，因为我将其限制为仅输入数字？
我知道您可以使用将在提交时检查的模式，但我希望永远不要输入“坏”字符。
HTML5 限制输入字符
IT技术
javascript
html
input
2021-02-24 06:44:08
6个回答
输入文本框
<input type="text" onKeyDown="myFunction()" value="" />
JavaScript
function myFunction() {
var e = event || window.event; // get event object
var key = e.keyCode || e.which; // get key cross-browser
if (key < 48 || key > 57) { //if it is not a number ascii code
//Prevent default action, which is inserting character
if (e.preventDefault) e.preventDefault(); //normal browsers
e.returnValue = false; //IE
}
}
对输入使用 html5 模式属性：
<input type="text" pattern="\d*" title="Only digits" />
或者
使用 html5 数字类型输入：
<input type="number" />
为了稍微改进 jonhopkins 的优秀答案，我添加了退格键并删除了键接受，如下所示：
function inputValidate(){
var e = event || window.event;
var key = e.keyCode || e.which;
if (((key>=48)&&(key<=57))||(key==8)||(key == 46)) { //allow backspace //and delete
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
}
}
对于限制字符符号，如“-”和“,”
<input type="text" pattern="[^-,]+">
用于限制数字
<input type="text" pattern="[^0-9]+">
用于限制字母表中的字母
<input type="text" pattern="[^a-zA-Z]+">
//improved wbt11a function
function numberFieldStrictInput(allowcomma, allownegative) {
var e = event || window.event; // get event object
var key = e.keyCode ||`enter code here` e.which; // get key cross-browser
if(key==8 || key==46 || key == 9 || key==17 || key==91 || key==18 ||
key==116 || key==89 || key==67 || key==88 || key==35 || key==36) //back, delete tab, ctrl, win, alt, f5, paste, copy, cut, home, end
return true;
if(key == 109 && allownegative)
return true;
if(key == 190 && allowcomma)
return true;
if(key>=37 && key<=40) //arrows
return true;
if(key>=48 && key<=57) // top key
return true;
if(key>=96 && key<=105) //num key
return true;
console.log('Not allowed key pressed '+key);
if (e.preventDefault) e.preventDefault(); //normal browsers
e.returnValue = false; //IE
}
//on input put onKeyDown="numberFieldStrictInput(1,0)"
其它你可能感兴趣的问题