我正在制作一个简单的Web应用程序。其中的一部分,我包括了一个类型为“number”的输入框。
<input type="number" min="0">
无论如何,当我在最新的谷歌浏览器中运行代码时,我也能输入文本:
我正在制作一个简单的Web应用程序。其中的一部分,我包括了一个类型为“number”的输入框。
<input type="number" min="0">
您可以使用 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);
});
下面是最终解决方案,它只允许 有效的 十进制数(包括浮点数和负数):
// 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);
});
您可以使用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 (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
1.2.3.4
显然不是有效的十进制数。另外,你的代码片段也会阻止键盘快捷键如 CTRL+A
和 CTRL+C
的工作。 - TobiasCTRL+A
和CTRL+C
正常工作,但1.2.3.4
不是有效的十进制数,是吗?但我认为我们没有编写此代码以验证十进制数...要求是不同的... - SK.