javascript/jquery中的输入屏蔽

Input masking in javascript/jquery

本文关键字：输入 屏蔽 jquery javascript      更新时间：2023-09-26

表单中有一个文本框，其中只允许输入特定的数字。即

0.5, 1, 1.5, 2, 2.5, 3........ and so on

如何为这些输入屏蔽此文本框？或者我应该使用什么正则表达式？

如果您只想在提交时进行验证，您可以简单地使用parseFloat、Math.floor和toString:

function isValidValue(text) {
    return text == (Math.floor(parseFloat(text) * 2) / 2).toString();
}

或者，您可以使用字符串替换.replace(/[^0-9'.]/g, "")执行正则表达式检查。这只允许使用数字和句点/小数点不幸的是，它不能阻止多个小数点

如果你想限制实际的击键，你需要更多的东西。将以下函数附加到文本框的keyup事件。记住使用return isValidKey(this, event)而不是简单的isValidKey(this, event):

function isValidKey(me, evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var currValue = me.value;
    // disallow decimal point if it is not the first one
    if ((charCode == 46 || charCode == 110 || charCode == 190) && currValue.indexOf(".") != -1)
        return false;
    // disallow non numeric characters
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

​

http://jsfiddle.net/SHJsz/

更新：现在稍微严格一些，但仍然不是万无一失的。如果用户使用退格或删除来删除原始起始数字，则仍然可以使用以0开头的数字或以小数点开头的数字。

http://jsfiddle.net/SHJsz/1/

有jquery插件可以处理屏蔽输入。

屏蔽输入插件

您可以在这里查看：

http://digitalbush.com/projects/masked-input-plugin/

但它并不能完全解决你的问题，只是允许一个掩码，而不是预定义的值。您可以根据需要修改插件代码。

对于这个控件，我会放置递增/递减的上下箭头，我会允许在失去焦点时验证的自由文本，并将值四舍五入到最接近的一半。我认为那将是最方便的。当掩码不允许您在其中键入文本时，它们可能会很烦人。

相关文章：