首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >HTML输入只接受0-9(英文数字)和০-৯(孟加拉数字)?

HTML输入只接受0-9(英文数字)和০-৯(孟加拉数字)?
EN

Stack Overflow用户
提问于 2019-11-21 07:57:51
回答 7查看 1.1K关注 0票数 6

我有一个html输入字段。我想只允许[0-9] (英语数字)和[০-৯] (孟加拉数字)

如果我使用type='number',那么它只支持[0-9],不支持[০-৯]

如果我使用type='text',那么它支持任何类型的字符。

,我想知道吗?

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2019-11-21 09:48:01

如果要完全禁止用户插入非数字数字,则应覆盖keydown事件,如果键不正确,则应防止该事件发生。

还可以将粘贴事件添加到只允许只包含允许字符的粘贴事件。

代码语言:javascript
运行
复制
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();
}
代码语言:javascript
运行
复制
<input type="text" class="numeric">

票数 4
EN

Stack Overflow用户

发布于 2019-11-21 09:10:37

这里是一个工作的纯HTML解决方案。请注意,文本仍然可以输入到输入元素中,但是浏览器可以处理验证。

这是一个你需要做的支持多语言输入框的权衡。

代码语言:javascript
运行
复制
input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}
代码语言:javascript
运行
复制
<form>
  <label for="numberBox">Enter a number</label>
  <input type="text" name="numberBox" pattern="[০-৯0-9]" title="Numbers only">
  <button>Submit</button>
</form>

票数 2
EN

Stack Overflow用户

发布于 2019-11-21 08:45:13

我已经检查了[০-৯0-9]模式,但似乎不起作用。因此,通过使用javascript's onkeydown事件,您可以实现您的目标。

代码语言:javascript
运行
复制
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);
}
代码语言:javascript
运行
复制
Input: <input type="text" onkeydown="return validateNumber(event);">

希望它能帮助到别人!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58969903

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档