首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何让HTML输入标签只接受数值?

如何让HTML输入标签只接受数值?
EN

Stack Overflow用户
提问于 2012-12-19 20:40:11
回答 31查看 790.9K关注 0票数 169

我需要确保某个<input>字段只接受数字作为值。输入不是表单的一部分。因此,它不会被提交,所以在提交过程中验证不是一个选项。我希望用户不能键入除数字以外的任何字符。

有没有一种很好的方法来实现这一点?

EN

回答 31

Stack Overflow用户

回答已采纳

发布于 2012-12-19 20:42:25

HTML 5

您可以使用HTML5 input type number仅限制数字条目:

代码语言:javascript
运行
复制
<input type="number" name="someid" />

这仅适用于HTML5投诉浏览器。确保您的html文档的doctype为:

<!DOCTYPE html>

另请参阅https://github.com/jonstipe/number-polyfill,以获得旧浏览器中的透明支持。

JavaScript

更新:有一个新的非常简单的解决方案:

它允许您在文本<input>上使用任何类型的输入筛选器,包括各种数字筛选器。这将正确处理Copy+Paste、Drag+Drop、键盘快捷键、上下文菜单操作、不可键入的键和所有键盘布局。

查看this answer或亲自尝试on JSFiddle

对于一般用途,您可以进行如下JS验证:

代码语言:javascript
运行
复制
function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

如果您希望允许使用小数,请将"if condition“替换为:

代码语言:javascript
运行
复制
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

来源:HTML text input allow only numeric input

JSFiddle演示:http://jsfiddle.net/viralpatel/nSjy7/

票数 314
EN

Stack Overflow用户

发布于 2012-12-19 20:45:01

您还可以在html5中使用pattern属性:

代码语言:javascript
运行
复制
<input type="text" name="name" pattern="[0-9]" title="Title" /> 

Input validation tutorial

不过,如果您的文档类型不是html,那么我认为您需要使用一些javascript/jquery。

票数 44
EN

Stack Overflow用户

发布于 2018-12-16 22:48:43

快速而简单的代码

代码语言:javascript
运行
复制
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

这将只允许使用数字和退格键。

如果您还需要小数部分,请使用以下代码片段

代码语言:javascript
运行
复制
<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />
票数 27
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13952686

复制
相关文章

相似问题

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