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

我正在制作一个简单的网络应用程序。在它的一个组成部分，我已经包括类型的输入框=“号”在<input type =“number”>中禁用文本输入>

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

总之，当我运行在我最新的谷歌Chrome浏览器的代码，我可以输入文字太：

I entered text in an input type of number

我不希望用户能够做到这一点。我应该如何纠正这一点？

来源

2014-01-19 coder

添加JavaScript捕捉输入和删除任何的不是一个数字。 –

@MarcB我该怎么做？ – coder

试试这个，http://stackoverflow.com/questions/7295843/allow-only-numbers-to-be-typed-in-a-textbox –

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

来源

2014-01-19 09:35:37

如果数字有点小数点''。那么..？这不会帮助... –

@Mike回答更新 –

这不适合我，因为即使有输入上的字符，$（this）.val（）等于'' –

您可以使用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 (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

来源：HTML Text Input allow only Numeric input

来源

2014-01-19 10:21:53

我喜欢你的解决方案，但十进制验证是不正确的。 '1.2.3.4'显然不是有效的小数。顺便说一句，你的代码片段还可以防止“CTRL + A”和“CTRL + C”等键盘快捷键无法工作。 –

@still_learning CTRL + A和CTRL + C工作正常..和'1.2.3.4'不是一个有效的小数..正确..但我相信我们没有写这个代码有效的十进制数。 ..要求是不同的.... –

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

回答

相关问题