【问题标题】：event.preventDefault() not working for android chromeevent.preventDefault() 不适用于 android chrome
【发布时间】：2017-02-02 20:30:11
【问题描述】：

event.preventDefault() 在 Chrome Android 操作系统上不起作用。而同样的动作正在 chrome IOS 上运行。我什至使用了 event.stopPropagation(), event.stopImmediatePropagation()。

HTML：

 <input class="otherAmount" type="text"id="pVal" name="pVal" onkeydown="validatePaymentToTwoDecimal(this,event);"/>

Java 脚本：

function validatePaymentToTwoDecimal(el, evt) {

        if(!$.isNumeric(evt.key)|| evt.key=="."){
            evt.preventDefault();
            evt.stopPropagation();
            evt.stopImmediatePropagation();
            return false;
        } else {
              return true;
        }
}

【问题讨论】：

您正在处理哪种类型的事件？
keydown。虽然 onKeyDown 返回 false，但我仍然在 html 字段中看到键值。最初我尝试使用 Keypress。 Keypress 不适用于 android，但适用于 IOS。所以移到keydown
你的代码在哪里？
if(!$.isNumeric(evt.key)){ evt.preventDefault(); evt.stopPropagation(); evt.stopImmediatePropagation();返回假； }
是否定义了evt？显示所有相关代码并提供minimal reproducible example

标签： javascript

【解决方案1】：

基于an answer for a similar question，您应该可以这样做来过滤输入：

jQuery 解决方案

$("#pVal").on(
    "input change paste",
    function filterNumericAndDecimal(event) {
        var formControl;

        formControl = $(event.target);
        formControl.val(formControl.val().replace(/[^0-9.]+/g, ""));
    });

原生 JavaScript 解决方案

var pInput;

function filterNumericAndDecimal(event) {
    var formControl;

    formControl = event.target;
    formControl.value = formControl.value.replace(/[^0-9.]+/g, ""));
}

pInput = document.getElementById("pVal");
["input", "change", "paste"].forEach(function (eventName) {
    pInput.addEventListener(eventName, filterNumericAndDecimal);
});

这通过使用正则表达式删除数字和小数点字符来工作。

【讨论】：

很高兴我能帮助一位开发人员 :-)
这个解决方案有个小问题：如果你在输入的中间输入了一个无效的字符，光标会跳到行尾。您必须跟踪 selectionStart 和 setSelectionRange 以替换初始位置的光标。这在同一个事件循环中是不可能的，所以你必须使用 setTimeout(f(), 0)... 这会使你的光标闪烁到行尾并返回...
有趣，@magom001。不过我相信它可以解决。
@LarsGyrupBrinkNielsen，如果您确实找到了解决方案，如果您能分享，我将不胜感激。干杯！

【解决方案2】：

替代解决方案是使用textInput 事件

const inpt = getElementById('pVal')
inpt.addEventListener('textInput', evt => {
    evt.key = evt.data
    if(!$.isNumeric(evt.key)|| evt.key=="."){
            evt.preventDefault();
        } 
})

它适用于 Android Chrome

【讨论】：

【解决方案3】：

唯一在 Android 上对我有用的过滤输入字符的解决方案

Android 不允许在 keydown 事件中捕获某些字符的输入。另一种方法是使用input 事件。我试过了，但是插入符号有问题，在某些情况下打字时会跳到错误的位置。

我是这样解决的：

let input = document.getElementById('input')

function withoutForbiddenChars(str){
    return str.replace(/[^\d]+/g, '')
}

function handleInput(event) {
    let charsBeforeCaret = input.value.slice(0, input.selectionStart)
    let charsAfterCaret = input.value.slice(input.selectionStart)
 
    charsBeforeCaret = withoutForbiddenChars(charsBeforeCaret)
    charsAfterCaret = withoutForbiddenChars(charsAfterCaret)
    
    input.value = charsBeforeCaret + charsAfterCaret
    
    let newCaretPos = charsBeforeCaret.length

    input.selectionStart = newCaretPos
    input.selectionEnd = newCaretPos
}

input.addEventListener('input', handleInput, false)

演示：https://codepen.io/udovichenko/pen/vYWWjmR

【讨论】：