Javascript jQuery:移动设备的按键事件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/38989559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 22:05:18  来源:igfitidea点击:

jQuery: keyup event for mobile device

javascriptjquerymobileclickkeyup

提问by user1374796

I'm having a few issues getting a keyup event to fire on my iPhone, my code is as follows:

我在 iPhone 上触发 keyup 事件时遇到了一些问题,我的代码如下:

        var passwordArray = ["word", "test", "hello", "another", "here"];

        var test = document.getElementById('enter-password');
        test.addEventListener('keyup', function(e) {

            if (jQuery.inArray(this.value, passwordArray) != -1) {
                alert("THIS IS WORKING");
            } else {}

        });

The idea being that as the user is typing into the #enter-passwordfield, as and when they've matched a word in the passwordArraythe alert will fire. This works on desktop, e.g. once you've entered wordthe function will fire straight away as soon as you've typed the d. Is there anyway to get this to work for mobile too?

这个想法是,当用户在#enter-password字段中输入时,当他们passwordArray在警报中匹配一个单词时就会触发。这适用于桌面,例如,一旦您输入word该功能,您输入d. 有没有办法让它也适用于移动设备?

回答by Joyson

You can add input event. It is an event that triggers whenever the input changes. Input works both on desktop as well as mobile phones

您可以添加输入事件。这是一个每当输入改变时触发的事件。输入既适用于台式机也适用于手机

test.on('keyup input', function(){
  //code
});

You can check this answer for more details on jQuery Input Event

您可以查看此答案以获取有关jQuery Input Event 的更多详细信息

回答by Frank

There are three events you can use (but you have to be careful on how you "combine" them):

您可以使用三个事件(但您必须小心“组合”它们的方式):

  • keyup: it works on devices with a keyboard, it's triggered when you release a key (any key, even keys that don't show anything on the screen, like ALT or CTRL);

  • touchend: it works on touchscreen devices, it's triggered when you remove your finger/pen from the display;

  • input: it's triggered when you press a key "and the input changes" (if you press keys like ALT or CTRL this event is not fired).

  • keyup:它适用于带键盘的设备,当你释放一个键时触发(任何键,甚至是屏幕上不显示任何内容的键,如 ALT 或 CTRL);

  • touchend:它适用于触摸屏设备,当您从显示屏上移开手指/笔时触发;

  • input:当您按下一个键“并且输入更改”时会触发它(如果您按下 ALT 或 CTRL 等键,则不会触发此事件)。

The inputevent works on keyboard devices and with touchscreen devices, it's important to point this out because in the accepted answer the example is correct but approximative:

输入事件适用于键盘设备,并与触摸屏设备,因为在接受答案的例子是正确的,但近似指出这一点是很重要的:

test.on('keyup input', function(){
}

On keyboard based devices, this function is called twicebecause both the events keyupand inputwill be fired.

基于键盘的设备上,这个函数被调用两次,因为事件keyupinput都会被触发。

The correct answer should be:

正确答案应该是:

test.on('keyup touchend', function(){
}

(the function is called on keyupfor desktops/laptops OR on touchendfor mobiles)

(该函数在台式机/笔记本电脑的keyup或手机的touchend调用

or you can just simply use

或者你可以简单地使用

test.on('input', function(){
}

but remember that the inputevent will not be triggered by all keys (CTRL, ALT & co. will not fire the event).

但请记住,输入事件不会被所有键触发(CTRL、ALT 和 co. 不会触发事件)。

回答by user1374796

The touchend event is fired when a touch point is removed from the device.

当触摸点从设备上移除时会触发 touchend 事件。

https://developer.mozilla.org/en-US/docs/Web/Events/touchend

https://developer.mozilla.org/en-US/docs/Web/Events/touchend

You can pass keyup and touchend events into the .on() jQuery method (instead of the keyup() method) to trigger your code on both of these events.

您可以将 keyup 和 touchend 事件传递到 .on() jQuery 方法(而不是 keyup() 方法)以在这两个事件上触发您的代码。

test.on('keyup touchend', function(){
//code
});

回答by user1374796

You should add a input event. It works on both mobile and computer devices.

您应该添加一个输入事件。它适用于移动和计算机设备。