Question

我的文本框很少。

<input type="text" class="tblTxtRanges"  />
<input type="text" class="tblTxtRanges"  />

我必须使此文本框仅接受十进制值。积极和消极的数字。用户可以在文本框中键入值，复制和粘贴。

我必须替换除数字，一个点和一个减号之外的所有其他字符。小数位没有限制。例如：有效条目是 10 10.11 -11 -11.23655等。

到目前为止我做了什么？

$(document).on("keypress keyup blur", ".tblTxtRanges", function (event) {
    //this.value = this.value.replace(/[^0-9\.]/g,'');
    $(this).val($(this).val().replace(/[^-?[0-9]+(\.[0-9]+)?]/g, ''));
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) && (event.which != 45 || $(this).val().indexOf('-') != -1)) {
        event.preventDefault();
    }
});

由于这不会解决用户在文本框中复制和粘贴值时的问题，我添加了一个更改事件函数来将值替换为有效的小数。但这并不是取代价值。（正则表达式中是否有任何错误？替换函数后的值相同）

$(document).on("change", ".tblTxtRanges", function (event) {
    var newVal = $(this).val().replace(/[^-?[0-9]+(\.[0-9]+)?]/g, '');
    $(this).val(newVal);
});

此代码正在，但在文本框上复制粘贴时却没有。此外，我们可以在输入时输入减号。（即像002-56.36）。需要一个jQuery解决方案，因为我正在寻找旧的浏览器兼容性。

有更好的想法吗？我可以在正则表达式中更改任何替换其他字符的内容吗？

Answer 1

您的主要问题来自于您尝试检查每个按键的事实。除了不能很好地复制和粘贴值之外，用户无法随意更改值（即使它意味着暂时使其成为无效小数）也是令人沮丧的体验。稍微放松一下您的验证，然后测试输入的值。

不是在每个按键上验证，只需使用change事件来验证整个字符串。我建议使用正则表达式来确保该值符合模式。在验证失败的情况下，准备用旧值完成该字段。

如果验证成功，则保存当前值（例如，设置属性data-oldValue），然后在验证失败时，您可以恢复先前验证的值（如果未找到则为空）。

为了增加效果，您可以添加一个指示错误的类，以便向用户提供输入值未采用的即时反馈。

希望有所帮助！

十进制文本框仅接受正值和负值

到目前为止我做了什么？

1 个答案: