注意:这是一个更新的答案。下面的评论指的是一个旧版本,它弄乱了键码。
JavaScript
自己试试on JSFiddle .
您可以过滤文本的输入值 <input>
与以下 setInputFilter
功能(支持复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键、插入符号位置、不同的键盘布局、有效性错误消息和all browsers since IE 9):
// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter, errMsg) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
textbox.addEventListener(event, function(e) {
if (inputFilter(this.value)) {
// Accepted value
if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
this.classList.remove("input-error");
this.setCustomValidity("");
}
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
// Rejected value - restore the previous one
this.classList.add("input-error");
this.setCustomValidity(errMsg);
this.reportValidity();
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
// Rejected value - nothing to restore
this.value = "";
}
});
});
}
您现在可以使用 setInputFilter
安装输入过滤器的功能:
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
}, "Only digits and '.' are allowed");
将您喜欢的样式应用于输入错误类。这是一个建议:
.input-error{
outline: 1px solid red;
}
见 JSFiddle demo更多输入过滤器示例。另请注意,您仍然必须进行服务器端验证!
typescript
这是一个 TypeScript 版本。
function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean, errMsg: string): void {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
this.value = this.oldValue;
if (this.oldSelectionStart !== null &&
this.oldSelectionEnd !== null) {
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}
} else {
this.value = "";
}
});
});
}
jQuery
还有一个 jQuery 版本。见 this answer .
HTML 5
HTML 5 有一个原生解决方案 <input type="number">
(参见 specification ),但请注意浏览器支持各不相同:
- 大多数浏览器只会在提交表单时验证输入,而不是在输入时验证。
- Most mobile browsers不支持
step
, min
和 max
属性。
- Chrome(版本 71.0.3578.98)仍允许用户输入字符
e
和 E
进入领域。另见 this question .
- Firefox(64.0 版)和 Edge(EdgeHTML 17.17134 版)仍允许用户在字段中输入任何文本。
自己试试on w3schools.com .
我是一名优秀的程序员,十分优秀!