禁用 <input type="number"> 中的文本输入答案

【问题标题】：Disable Text Entry in <input type="number">禁用 <input type="number"> 中的文本输入
【发布时间】：2014-02-08 12:05:58
【问题描述】：

我正在制作一个简单的网络应用程序。在其中一部分，我包含了一个 type="number"

的输入框

<input type="number" min="0">

无论如何，当我在最新的 Google Chrome 浏览器中运行代码时，我也可以输入文本：

我不希望用户能够这样做。我应该如何纠正这个问题？

【问题讨论】：

添加 javascript 以捕获输入并删除任何不是数字的内容。
@MarcB 我该怎么做？
试试这个，stackoverflow.com/questions/7295843/…
注意：您也可以使用pattern 属性。 html5pattern.com

标签： html validation user-input

【解决方案1】：

您可以使用 JavaScript（例如使用 jQuery）来只允许特定字符：

// Catch all events related to changes
$('#textbox').on('change keyup', function() {
  // Remove invalid characters
  var sanitized = $(this).val().replace(/[^0-9]/g, '');
  // Update value
  $(this).val(sanitized);
});

Here 是个小提琴。

同样支持浮点数：

// Catch all events related to changes
$('#textbox').on('change keyup', function() {
  // Remove invalid characters
  var sanitized = $(this).val().replace(/[^0-9.]/g, '');
  // Remove the first point if there is more than one
  sanitized = sanitized.replace(/\.(?=.*\.)/, '');
  // Update value
  $(this).val(sanitized);
});

而here 是另一个小提琴。

更新：虽然您可能不需要这个，但这里有一个允许前导减号的解决方案。

// Catch all events related to changes
$('#textbox').on('change keyup', function() {
  // Remove invalid characters
  var sanitized = $(this).val().replace(/[^-0-9]/g, '');
  // Remove non-leading minus signs
  sanitized = sanitized.replace(/(.)-+/g, '$1');
  // Update value
  $(this).val(sanitized);
});

3rd fiddle

现在是只允许有效小数（包括浮点数和负数）的最终解决方案：

// Catch all events related to changes
$('#textbox').on('change keyup', function() {
  // Remove invalid characters
  var sanitized = $(this).val().replace(/[^-.0-9]/g, '');
  // Remove non-leading minus signs
  sanitized = sanitized.replace(/(.)-+/g, '$1');
  // Remove the first point if there is more than one
  sanitized = sanitized.replace(/\.(?=.*\.)/g, '');
  // Update value
  $(this).val(sanitized);
});

Final fiddle

【讨论】：

这对我不起作用，因为即使输入中有字符，$(this).val() 也等于 ''
如何将输入光标移动到与以前相同的位置？中间也可以写

【解决方案2】：

您可以使用HTML5 input type number 来限制仅输入数字：

<input type="number" name="someid" />

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

<!DOCTYPE html>

出于一般目的，您可以进行 JS 验证，如下所示：

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

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

如果您想允许小数，请将“if 条件”替换为：

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

来源：HTML Text Input allow only Numeric input

【讨论】：

我喜欢您的解决方案，但十进制验证不正确。 1.2.3.4 显然不是有效的小数。顺便说一句，您的代码 sn-p 还可以防止键盘快捷键如 CTRL+A 和 CTRL+C 工作。
@still_learning CTRL+A 和 CTRL+C 工作正常.. 和 1.2.3.4 不是有效的小数.. 正确.. 但我相信我们还没有将此代码写入有效的十进制数字...要求不同....