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

Posted 2023-03-05

【中文标题】Jquery preventDefault 在 android 4.4 默认浏览器上不起作用

【英文标题】：Jquery preventDefault not working on android 4.4 default browser

【发布时间】：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，则不会。

【参考方案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 来解决。