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

Question

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

9

我正在制作一个简单的Web应用程序。其中的一部分，我包括了一个类型为“number”的输入框。

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

无论如何，当我在最新的谷歌浏览器中运行代码时，我也能输入文本：

I entered text in an input type of number

我不希望用户能够这样做。我该怎么纠正呢？

- coder

添加 JavaScript 以捕获输入并删除任何非数字字符。 - Marc B

@MarcB 我该怎么做？ - coder

尝试这个，https://dev59.com/OGw05IYBdhLWcg3wVwg4 - Krish R

注意：您还可以使用“pattern”属性。http://html5pattern.com/ - Thew

2个回答

4

您可以使用HTML5输入类型数字来限制只能输入数字：

<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)))

Source: HTML Text Input allow only Numeric input

- SK.

我喜欢你的解决方案，但是十进制验证不正确。1.2.3.4 显然不是有效的十进制数。另外，你的代码片段也会阻止键盘快捷键如 CTRL+A 和 CTRL+C 的工作。 - Tobias

@still_learning CTRL+A和CTRL+C正常工作，但1.2.3.4不是有效的十进制数，是吗？但我认为我们没有编写此代码以验证十进制数...要求是不同的... - SK.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tobias · Accepted Answer

您可以使用 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);
});

这里有一个fiddle。

带有浮动支持的相同内容：

// 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);
});

还有这里另一个样式。

更新：虽然您可能不需要，但这里是允许负号的解决方案。

// 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);
});

第三个 JSFiddle 代码段

下面是最终解决方案，它只允许 有效的 十进制数（包括浮点数和负数）：

// 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);
});

最终代码