内联函数将输入限制为最多 2 位小数的数字？答案

【问题标题】：Inline function to restrict input to a number with up to 2 decimal places?内联函数将输入限制为最多 2 位小数的数字？
【发布时间】：2018-04-04 15:29:23
【问题描述】：

我目前在我的表单中有一个输入，我仅限于输入数字，它不允许输入除整数以外的任何字符：

&lt;input class="quantity" type="text" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57"&gt;

我想修改这个onkeyup 代码，以便它还允许一个最多有2 个小数位的数字。是否可以直接在内联onkeyup 函数中执行，或者我需要在输入之外创建一个函数并调用它？我发现了一些类似的问题，但它们主要与事后验证输入有关，而我想限制人们甚至输入不是整数或带 1 或 2 位小数的数字。

不幸的是，HTML5 模式在这里也不是一个选项，因为我必须支持不支持它的浏览器。

【问题讨论】：

你为什么使用return null？ bu 返回false 事件将被禁止，除 false 之外的任何内容都不会限制用户。
@FaridRn 您可以在示例中看到它确实限制了用户。
检查我的答案，我更新了。

标签： javascript validation input onkeyup

【解决方案1】：

onkeyup 事件在按下键并且值已添加到输入后触发，因此您必须在值更改之前限制用户。

使用type="number"的用户将无法输入除十进制数字以外的任何字符；通过使用min 和max 属性，浏览器会将输入标记为invalid，但这并不限制用户输入大于最大值的值。

在以下示例中，我使用onkeypress 事件侦听器检查输入更改之前输入的值，并检查当前值和新输入值的总和以确保它小于 100，并且不会让用户输入任何值大于 99。

<input type="number" onkeypress="return (this.value + String.fromCharCode(event.which) > 99) ? false : true;" min="0" max="99">

链接到实时示例：JSFiddle

【讨论】：