javascript输入只允许数字

24 浏览
0 Comments

javascript输入只允许数字

我使用这段代码，它可以正常工作。

但是我无法访问HTML，只能使用JavaScript。

document.getElementById("txtChar").addEventListener("keypress", <>, false);

在<>这个位置应该填写什么？

另外，我发现这个组件还有另一个错误：

当你使用复制粘贴（Ctrl+V 或右键-粘贴）时，它不起作用。

有人知道如何解决吗？

0

3 答案

0 Comments

问题的出现原因是用户想要限制输入框只能输入数字，但是他们在没有访问到HTML标记的情况下无法实现。解决方法是使用HTML5中的新属性required和pattern。通过设置type="number"和pattern="\d+"，可以实现只允许输入数字的效果。同时，可以通过CSS来控制输入框的状态，例如设置#txtChar:required:valid的样式为绿色边框，设置#txtChar:required:invalid的样式为红色边框。这样，在<form>标签中使用时，用户将无法在输入无效的状态下提交表单。

0
0 Comments

文章标题：javascript输入仅允许数字的原因和解决方法

我知道我来晚了。

jAndy提供的HTML5示例可能是对于支持它的浏览器来说最好的答案。Josaph提供的JavaScript答案也很好，它激发了我的答案来解决提问者的补充问题和我的问题。

下面的代码会丢弃与正则表达式匹配的输入（非数字用空字符串替换），并在任何输入时调用，包括从粘贴操作中输入的内容。

function stripNonNumeric() {
   this.value = this.value.replace(/\D+/g, '');
}
var txtChar = document.getElementById("txtChar");
if (txtChar.addEventListener) {
   txtChar.addEventListener("input", stripNonNumeric);
} else if (txtChar.attachEvent) {
   txtChar.attachEvent("oninput", stripNonNumeric);
}

我不是一个JavaScript专家，我不确定这是否是解决问题的好方法，或者是否需要考虑性能问题。然而，对我来说它是有效的解决方法。

0
0 Comments

javascript input allowing only numbers这个问题的出现的原因是需要在输入框中只允许输入数字，禁止输入其他字符。为了解决这个问题，可以使用以下方法：

1. 在代码中添加一个名为isNumberKey的函数来处理输入框的内容。

2. 在函数中使用evt.preventDefault()来阻止默认的字符输入行为。

3. 判断输入的字符编码是否为数字，如果不是数字则阻止输入。

4. 在HTML5浏览器中配置输入框的属性，包括类型为number，最小值为0，正则表达式为\d+，占位符为"Only integer positive numbers"，必填属性为required。

5. 将isNumberKey函数添加到输入框的keypress事件监听器中。

以下是一个示例代码，包括样式设置：

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode == 46 || charCode > 31 && (charCode < 48 || charCode > 57)){
        evt.preventDefault();
        return false;
    }
    return true;
}
txtChar = document.getElementById("txtChar")
txtChar.addEventListener("keypress", isNumberKey, false);
txtChar.type = "number";
txtChar.min = 0;
txtChar.pattern = "\\d+";
txtChar.placeholder = "Only integer positive numbers";
txtChar.required = "required";

你可以在这个链接中找到一个包含样式的工作示例：[http://jsfiddle.net/pL9Zk/](http://jsfiddle.net/pL9Zk/)

0