我有一个html输入字段。我想只允许[0-9]
(英语数字)和[০-৯]
(孟加拉数字)
如果我使用type='number'
,那么它只支持[0-9]
,不支持[০-৯]
。
如果我使用type='text'
,那么它支持任何类型的字符。
,我想知道吗?
发布于 2019-11-21 09:48:01
如果要完全禁止用户插入非数字数字,则应覆盖keydown
事件,如果键不正确,则应防止该事件发生。
还可以将粘贴事件添加到只允许只包含允许字符的粘贴事件。
var allowedKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
"ARROWRIGHT", "ARROWLEFT", "TAB", "BACKSPACE", "DELETE", "HOME", "END", "০", "১", "২", "৩", "৪", "৫", "৬", "৭", "৮", "৯"
];
if (document.readyState === "complete") onLoad();
else addEventListener("load", onLoad);
function onLoad() {
document.querySelectorAll("input.numeric").forEach(function(input) {
input.addEventListener("keydown", onInputKeyDown);
input.addEventListener("paste", onInputPaste);
});
}
function onInputKeyDown(event) {
if (!allowedKeys.includes(event.key.toUpperCase()) && !event.ctrlKey) {
event.preventDefault();
}
}
function onInputPaste(event) {
var clipboardData = event.clipboardData || window.clipboardData;
if (/^[0-9০-৯]+$/g.test(clipboardData.getData("Text"))) return;
event.stopPropagation();
event.preventDefault();
}
<input type="text" class="numeric">
发布于 2019-11-21 09:10:37
这里是一个工作的纯HTML解决方案。请注意,文本仍然可以输入到输入元素中,但是浏览器可以处理验证。
这是一个你需要做的支持多语言输入框的权衡。
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
<form>
<label for="numberBox">Enter a number</label>
<input type="text" name="numberBox" pattern="[০-৯0-9]" title="Numbers only">
<button>Submit</button>
</form>
发布于 2019-11-21 08:45:13
我已经检查了[০-৯0-9]
模式,但似乎不起作用。因此,通过使用javascript's
onkeydown
事件,您可以实现您的目标。
function validateNumber(event)
{
var unicode = event.keyCode ? event.keyCode : event.charCode;
/* For Numbers. */
if ((unicode >= 48 && unicode <= 57) || (unicode >= 96 && unicode <= 105)) {
return true;
}
/* For other keys that might allowed like [Backspace]. */
/*
8: Backspace
9: Tab
27: Escape
35: End
36: Home
37: Left Arrow
39: Right Arrow
45: Insert
46: Delete
*/
var allowedKeys = [8, 9, 27, 35, 36, 37, 39, 45, 46];
return (allowedKeys.indexOf(unicode) >= 0);
}
Input: <input type="text" onkeydown="return validateNumber(event);">
希望它能帮助到别人!
https://stackoverflow.com/questions/58969903
复制相似问题