html只允许输入数字,html输入框只能输入数字

　　这两年看到很多关于这个的文章和帖子，真的是一件很方便的事情。但是太多的实现还是有漏洞，实现不完整等等。

　　整个概念是合理的：用HTML 5属性限制可以发送到服务器的内容，然后用Javascript增强，限制用户首先可以输入的内容。

　　所以我们来看看这些问题，更好的认识一下。

问题 1，不好的脚本

　　最常见的缺陷是缺乏适当的降级功能。如果你想在“electron”或“nw.js”中构建一个完整的stack应用程序，那没问题，但这种形式的东西通常在面向公众的网站中没有位置。

　　正如我常说的，高质量的脚本应该增强已经在工作的页面，而不是用户使用它的唯一方式。

　　解决方案？

　　使用模式和步骤属性来限制有效内容。

问题 2，正则表达式模式错误或不完整

　　人们最常用的模式是[-/d] *，它的问题是允许到处都是负号。虽然你绝对可以用type="number "来解决问题，但这并不是一个好的选择。截取键时尤其如此，因为减号只能是第一个字符。

　　它也可能有问题，因为有些实现“不是”正则表达式，这将导致误报。

　　解决方案？

　　对于HTML，使用一个更好的表达式：[-d] \ d * $这个更健壮更准确。减号可以是匹配开始处的第一个字符，后跟零个或多个小数，直到字符串结束。

　　对于JavaScript，只使用正则表达式来测试数字，并应用一些更实用的逻辑来检测其他值。

　　简单易行！

问题 3，在标记中使用事件属性

　　我知道在JSX垃圾中，大量用嘴呼吸的人在鼓励这一点，但如果你写的是香草或其他系统，请出于对圣诞节的爱，在1997年把你的头骨从直肠里拿出来。

　　将“onkeypress”或“onchange”放在标签中意味着错过一个缓存机会，违反了关注点分离的原则。像HTML 4 Strict中丢弃的所有东西一样，以这种方式将JavaScript放入标记中是非常愚蠢的。就像如果你要用“文本-白盒-阴影col-4-s”属性在你的HTML上撒尿，请承认你的失败，然后回到写HTML 3.2的时候，用所有那些字体/中心标签、颜色、BGCOLOR、大小、边框和对齐属性，以及“用于布局的表格”来写。你们好像都很怀念，很珍惜。

　　这也意味着您没有对事件处理程序的完全/适当的访问权限。

　　解决方案？

　　Element.addEventListener请使用！

问题 4，必须对每个输入进行硬编码

　　无论是通过问题3将事件属性放入标签，还是通过手动获取唯一ID来捕获，我几乎没有找到一个可以实际使用即插即用标签应用的代码库！

　　解决方案？

　　document . queryselectorall( input[type= number ][step= 1 ])为我们提供了所有想要的整数输入，因此我们可以对其进行增强。

问题 5，一些脚本阻止使用导航控制和正常编辑！

　　通过拦截和只允许减号和0…9，它们可以防止退格键、回车键、tab键、箭头、删除、插入等。不是所有的浏览器都将这些作为event.key发送，这取决于你挂钩的是什么事件。比如Firefox和Chrome中的“keypress”事件会过滤掉一些，以免破坏正常的表单使用，但“Old Edge”和Safari不会，“keydown”不会过滤任何东西。

　　解决方案？

　　因为“keypress”事件在不同的浏览器中是不一致的，所以使用keydown。然后，我们可以利用所有控制键在Event.key值中返回多个字符的事实。我们只需要检查Event.key.length1就可以说“继续允许这些”。

　　如前所述，我们需要的只是一个简单的输入。不用JavaScript，先有尽可能多的功能！

　　HTML:

　　input= number step= 1 pattern=[-/d]/d * $ /只接受整数。如果只想接受正数，可以改为pattern=/d "

　　JavaScript:

　　然后我们可以使用JavaScript来限制用户的输入，这样人们甚至不允许输入无效值。

　　(function(){ var integers=document . query selectorall( input[type= number ][step= 1 ])，intRx=/\ d/；for(var input of integers){ input . addevent listener( keydown ，integerChange，false)；} function integer change(event){ if(event . key . length 1 (event . key===- event . current target . value . length===0) intrx . test(event . key))return；event . prevent default()；}})();首先，我们把它包装在生活中以隔离范围。然后，在页面上抓取我们想要的所有输入，并创建我们的正则表达式。

　　我在事件开始时而不是在事件内部创建正则表达式，这样我们就不必浪费时间在每个该死的键上创建它。这就是匿名函数可能带来开销的地方，也是你需要告诉那些“函数式程序员”和他们的“副作用”废话的地方。

　　遍历所有输入，并为它们分配事件处理程序。

　　上述程序只检查我们的回报。控制键，如箭头、退格键、回车键等。都会返回完整的文本来描述它们，所以如果event.key的长度是1，就不要停这些了。

　　如果它是一个减号和第一个字符，通过return允许它。

　　如果是数字，通过return允许。

　　如果没有，请停止活动。

Live Demo

　　这是一本密码本。它包括几个文本字段和一些整数和非整数字段，所以您可以看到它实际上只挂钩我们想要的字段。

　　https://codepen.io/jason-knight/pen/QWGyrwq

悬而未决的问题

　　我可能考虑添加的一件事是挂钩“change”事件来拦截粘贴，但是由于“pattern”属性不允许提交无效值，所以应该没有问题。

结论

　　多想想用户可能输入的错误的东西以及如何处理，但也要记住用户可能输入的所有其他东西，这些东西与值本身无关。

　　请始终注意，出于安全或可访问性的原因，许多用户会主动阻止脚本编写或使脚本在UA中不可用。增强而不是取代您的基本功能！

　　计划将这些东西应用到所有这些领域，而不是从一开始就只使用单一元素。

　　留意低效的地方，比如如何生成多次用作回调的匿名函数……或者如何把脚本放在标签里会错过跨页或者重访的缓存机会。

　　做了这些事情之后，实现这么简单的功能就不会再困扰你，也不会再骚扰用户了。

　　这就是这篇关于HTML5数字输入只接受整数的实现代码的文章。有关HTML5数字输入整数的更多信息，请搜索之前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。