Jquery preventDefault 在 android 4.4 默认浏览器上不起作用答案

【问题标题】：Jquery preventDefault not working on android 4.4 default browserJquery preventDefault 在 android 4.4 默认浏览器上不起作用
【发布时间】：2015-07-27 00:26:08
【问题描述】：

我正在使用基于 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;
  }
});

Working fiddle

注意：- 我不能使用keypress 事件，因为安卓默认浏览器无法监听这个事件。

【问题讨论】：

您是否尝试过使用input type="number" 支持它现在很常见：caniuse.com/#feat=input-number
我不能使用type=number，因为验证是针对可以接收-/+/,/的数组浮点数。还。数字键盘不允许我输入这些键。
使用'event.preventDefault'代替e。因为在 ANDriod e 中是未定义的
再看一下 jQuery 文档。 jQuery 处理程序接收的参数不是原始事件对象。它总是有preventDefault和stopPropagation，即使底层浏览器没有，在上面设置returnValue或cancelBubble是没有意义的。
@JqueryKing：呃，不，如果用户正在使用 jQuery，则不会。

标签： javascript android jquery html angularjs

【解决方案1】：

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

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

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

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

【讨论】：

完整文档可以在这里找到：api.jquery.com/on。该函数只是将一个或多个事件的事件处理函数附加到所选元素。我将输入事件上的函数附加到具有 id '#test' 的元素上。我得到该字段上的文本并将我不需要的字符（[^0-9] -> 所有不是数字的字符）替换为''。我将新值分配给“#test”字段。
您还应该处理paste 事件。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

如果你是基于 Angular 开发网站，你应该以 Angular 的方式解决问题。

Here示例如何做到这一点。

这个想法是使用NgModelController和FormController。

【讨论】：

我尝试过角度验证，但我的要求不止于此，因为我想限制用户插入任何无效输入。我唯一的问题发生在 android 默认浏览器中。

【解决方案4】：

我不知道您为什么要阻止关键事件，但我认为您只是想阻止输入无效字符。让我们看看在没有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/

我希望，它会在任何地方解决您的问题，并且永远不要忘记“粘贴”！

【讨论】：

我尝试过使用旧值，但输入闪烁。我仍然会尝试你的解决方案，如果它有效，那么我会选择你的答案。
对于基于角度的应用程序，这是绝对错误的答案，因为在上面提供的侦听器中没有更新角度模型。
在验证函数结束时可以通过单个 $apply 来解决。