Question

我正在制作一个简单的网络应用。在其中的一部分，我已经包含了一个type =“number”的输入框

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

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

I entered text in an input type of number

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

Answer 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

Answer 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 condition”替换为：

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

来源：HTML Text Input allow only Numeric input

禁用<input type =“number”/>中的文本输入

2 个答案: