Jquery preventDefault在安卓4.4默认浏览器上无效。

Question

我正在使用基于Angular和jQuery的网站。 我有一个文本输入字段，用于验证浮点数数组。 我的要求是限制用户输入字母等。

问题在于我正在使用e.preventDefault()，但它在Android默认浏览器中不起作用，但在Android Chrome中完美运行。

我已经搜索了很多，但无法获得任何解决方案。

我的示例代码：

 $('#test').keydown(function (e) {
      e.stopPropagation();
      e.preventDefault();
      e.returnValue = false;
      e.cancelBubble = true;
      return false;
});

我也尝试过：

$('#test').keydown(function (e) {
  if (e.preventDefault) {
       e.preventDefault();
    } else {
       e.returnValue = false;
  }
});

工作示例

注意：我无法使用keypress事件，因为Android默认浏览器无法监听此事件。

- Sujata Chanda

---

你尝试过使用 input type="number" 吗？它现在非常普遍：http://caniuse.com/#feat=input-number - Rory McCrossan

我无法使用 type=number，因为验证是针对可以接收 -/+/,/. 的数组浮点数的。数字键盘不允许我输入这些键。 - Sujata Chanda

请使用“event.preventDefault”代替“e”，因为在安卓中，“e”未定义。 - Sudharsan S

再次查看jQuery文档。jQuery处理程序接收的参数不是原始事件对象。即使底层浏览器没有，它始终具有preventDefault和stopPropagation，在其上设置returnValue或cancelBubble是无意义的。 - T.J. Crowder

@JqueryKing：嗯，如果用户正在使用jQuery，那就不是这样的。 - T.J. Crowder

Answer 1

我在Android默认浏览器上也遇到了这个问题。preventDefault对我没有帮助，所以我使用了jQuery的.on函数。

    $('#test').on('input',function () {
        var inputText = $(this).val();

        var resultText = inputText.replace(/[^0-9]/g, '');
        $(this).val(resultText);
    });

您可以将需要允许的其他字符添加到正则表达式中。希望对您有所帮助。

- Hautelman Claudiu

---

完整的文档可以在这里找到：https://api.jquery.com/on/。该函数仅将一个或多个事件的事件处理程序函数附加到所选元素。我将我的函数附加到具有id“＃test”的元素上的输入事件。我获取该字段上的文本并用''替换我不需要的字符（[^0-9] ->除数字外的所有内容）。我将新值分配给“＃test”字段。 - Hautelman Claudiu

你还应该处理“粘贴”事件。 - Lars Gyrup Brink Nielsen

Answer 2

如果您正在开发基于Angular的网站，应该以Angular的方式解决问题。 这里是如何做到这一点的示例。

思路是使用NgModelController和FormController。

- Mikalai

---

我已经尝试了Angular验证，但我的要求比那更多，因为我想限制用户插入任何无效的输入。我的唯一问题出现在Android默认浏览器中。 - Sujata Chanda

Answer 3

我不知道你为什么想要阻止按键事件，但我认为你只是想要防止输入无效字符。让我们看看如何在不使用 preventDefault 的情况下解决你的问题：

(function(){ // anon function for scope

    var prevVal = $("#test").val(); // get initial value of input

    $('#test').on("input", function (e) { // input will also handle paste event. it handle every input'
        if(/*your `if` here*/ Math.random() > 0.3){
            this.value = prevVal; // You shall not pass!
        }
        prevVal = this.value; // save current valid value
    }); 

})();

http://jsfiddle.net/rk5wuubo/

我希望这个链接能够在各处解决您的问题，并且不要忘记“粘贴”！

- JerryCauser

---

我已经尝试使用旧值，但输入框会因此闪烁。不过我会尝试您的解决方案，如果有效的话，我会选择您的答案。 - Sujata Chanda

对于基于Angular的应用程序来说，这绝对是错误的答案，因为Angular模型在上面提供的监听器中没有被更新。 - Mikalai

在验证函数的末尾使用单个$apply即可解决此问题。 - JerryCauser

Answer 4

请使用AngularJS的$formatters。这将帮助您在将viewValue设置为modelValue之前检查它。

请阅读此文档：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

- Raju Bera