使用jQuery防止html输入中的值 [英] Preventing values in html inputs with jQuery

问题描述

如果该输入的组合值与其最新的按键不通过正则表达式，如何阻止用户更改输入框中的字符串？

How do I prevent the user from changing a string in an input box if the combined value of that input with their latest keypress does not pass a regular expression?

我看到了各种关于如何使用keypress来测试单个字符的例子，但我需要将整个值与正则表达式匹配，而不仅仅是他们按下的键。

I see all kinds of examples on how to use keypress for testing individual characters, but I need to match the entire value to a regular expression, not just the key they pressed.

例如，文本框需要符合以下正则表达式：

For example, The textbox needs to conform to the following regular expression:

"^023-[0-9]{0,7}$"

所以如果他们想将023更改为23，它们应该在删除<$ c $时停止它们c> 0 字符。在 023 之后删除 - 也是如此。一旦他们在 023 之后输入超过7个数字，它也应该停止它们。 这不能在模糊时完成。必须在每次按键后完成。 性能不是问题。

So if they want to change "023" to "23", it should stop them when they delete the 0 character. The same is true for deleting the - after 023. It should also stop them once they enter more than 7 numbers after 023. This cannot be done on blur. It must be done after every key stroke. Performance is not an issue.

如果我在jQuery中使用keypress（）事件，并获取输入元素的值，如下所示： / p>

If I use keypress() event in jQuery, and get the value of the input element like this:

$(this).val()

然后我只会在按下按键之前得到该值 - 而不是之后。因此，没有办法根据我的正则表达式测试输入。我不能简单地将按键附加到此字符串，因为我不能假设他们只是在字符串最右侧输入键。

Then I will only get the value before they pressed the key - not after. Thus, there is no way to test the input against my regular expression. I cannot simply append the key pressed to this string, because I cannot make the assumption that they are only entering keys at the right-most side of the string.

我已经研究过keydown / keyup事件，虽然keyup似乎在用户按下一个键后给我输入的当前值，但我发现很难消除他们键入的效果。哪个keypress（）显然没有问题。

I have looked into keydown/keyup events, and while keyup seems to give me the current value of the input after the user has pressed a key, I am finding it difficult to remove the effects of what they typed... which keypress() does not have a problem with apparently.

var regex = new RegExp("^023-[0-9]{0,7}$");

$("#number").keyup(function(event) {
    var number = $(this).val();

    if(!regex.test(number)) {
        event.preventDefault();

        return false;
    }
});

上述代码无效。似乎keypress（）让我能够停止他们输入的内容，但是keyup让我能够获得当前值。我需要一个可以同时执行这两个操作的解决方案;）

The above code just doesn't work. It seems keypress() gives me the ability to stop what they typed, but keyup gives me the ability to get the current value. I need a solution that does both ;)

问题实际上源于浏览器没有MVC架构。该模型是视图。不幸的是，我们无法在更新视图之前验证更新的模型...因为我们需要在keyup事件期间更新视图以获取更新的模型数据......到那时，要阻止它们更新它们为时已晚查看，因为它已经更新。

The problem really stems from the fact that the browser has no MVC architecture. The model is the view. Unfortunately, we can't validate the updated model before the view is updated... because we need the view updated during a keyup event to get the updated model data... and by then, it's too late to prevent them from updating the view since it's already been updated.

推荐答案

这个怎么样：

var prevValue = "";
$("#number").keydown(function(e) {
   prevValue = $(this).val();
});

$("#number").keyup(function(e) {
...
   if(!regex.test(number))
      $(this).val(prevValue);
      // show error or other processing you need to do
});

这篇关于使用jQuery防止html输入中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！