【问题标题】:how to cancel keydown on mobile browsers如何在移动浏览器上取消 keydown
【发布时间】:2018-10-19 19:31:33
【问题描述】:

我有这个在桌面浏览器上完美运行。它检查用户何时在邮政编码文本输入字段中按下键:

zip_field.addEventListener(
                    'keydown',
                    function(evt){check_zip({evt:evt, zip_field: zip_field, submit_button: submit_button})}, 
                    false
                    )

check_zip 函数在底部有这个,用于在用户输入字母等时取消按键:

if(prevent_key)
{
    evt.preventDefault()
    evt.stopPropagation()
    return false;
}

在移动浏览器上,if 语句的处理方式与桌面浏览器一样,但仍允许字符通过。但是,如果我在其中设置断点并单步执行代码,它就可以正常工作!

我在 Android 上的 Chrome 和 Firefox 中进行了测试,并且两者都发生了。我还需要在移动设备上做些什么来防止/取消密钥并防止它出现在输入框中吗?

更新:我能够在 iPhone 上进行测试,并且它在那里正常工作。所以它只在 Android 上坏了(FF、Chrome 和三星浏览器都失败了)。

【问题讨论】:

  • 为了使return false生效,请将{check_zip(替换为{ return check_zip(
  • @trincot 我刚刚尝试过,但它仍然发生在 Android 上。
  • 这似乎是 Android 上的某种竞争条件,因为如果我输入断点并逐步执行它,它就可以正常工作。但我不明白为什么没有其他浏览器有这个问题。
  • 什么断点?你的意思是调试断点?

标签: javascript events keydown


【解决方案1】:

在创建一个精简的测试页面之后,我发现 Chrome 总是将使用 Android 键盘按下的键解释为 keydown 事件中的 keyCode 229。如果我用 USB 线将手机插入电脑,我在桌面键盘上按的键使用正确的键码,但手机虚拟键盘上的键码都是 229。经过更多研究后,我发现:

keyCode on android is always 229

但是,如果我在其中设置断点并单步执行,我无法弄清楚为什么它会起作用。

【讨论】:

  • 你不能用keydown取消,但是你可以用你提到的textInput取消。
【解决方案2】:

访问evt的方式不对。 evt 在您的代码中以对象形式传递给 check_zip() 的参数。 那么你应该像这样访问。

function check_zip(param) {
    ...
    if (prevent_key)
    {
        param.evt.preventDefault()
        param.evt.stopPropagation()
        return false;
    }
}

【讨论】:

  • 你怎么知道OP没有正确初始化evt?那部分代码不在他们的问题中......
  • 我是从参数的形式想到的。但是如果在这个函数中定义了一个局部变量 evt,这将不适用。
  • 如果我在 Android 浏览器上控制台记录事件 (evt),它会在桌面浏览器和 iphone 中显示所有完全相同的内容。它的行为方式完全相同,只是不会阻止键在文本框中显示(除非我在其中设置了断点)。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-01-08
  • 1970-01-01
  • 1970-01-01
  • 2018-04-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多