移动网站的 JavaScript 输入按键事件替代方案

问题描述 投票：0回答：5

我的网站中有一个快速反馈小部件，它只有一个文本框。当用户按下 Enter 键时，将使用 ajax 自动发送反馈。但这在android、j2me等移动设备上不起作用。有没有可以在桌面和移动设备上同时使用的替代方案？添加提交按钮对我来说是不可接受的。

javascript ajax forms events mobile
5个回答
12
投票

我刚刚在 Android 上检查过，当您输入某些内容并按“Go”（输入替代项？）时，它将触发一个事件，并且键码实际上是 13，因此与桌面键盘上的 Enter 相同。

我建议调试代码并检查提交是否真正被触发，但也许关键代码并不总是13？只是猜测。

2
投票

为什么不将

onblur
与回车键结合使用？如果可以按 Enter 键，它将按原样工作。如果不能，他们只会留下输入，然后 
onblur
就会开始工作。

1
投票

只需将 

e.code=== "enter"
更改为 
e.keyCode===13
**即可。它适用于桌面和移动设备。移动设备上的“Go”键与“Enter”键具有相同的
keyCode
。 在响应模式（移动设备）下检查 
e
中的 
console.log()
对象，您就会明白其中的区别。

0
投票

我用表格包装来制作它，先添加

onsubmit
，然后添加
preventDefault
。 （实际上是在 Vue 中
@submit.prevent
。）

实际上并不需要输入按钮，只需表单和输入即可。

    form.field.m-sm.px-md(@submit.prevent="onSearch")
      .control.has-icons-right
        input.input.is-rounded(type="search" placeholder="Search" v-model="q")
        span.icon.is-right
          fa(icon="search")
0
投票

我对此得到了确切的答案...您需要识别哪个是按下按钮的关键代码。通常是 13。要在移动设备中激活此键，您需要将 

type="submit"
添加到该按钮。下面给出了代码和示例...

var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("myBtn").click();
  }
});
<!DOCTYPE html>
<html>
<body>

<h3>Trigger Button Click on Enter</h3>
<p>Press the "Enter" key inside the input field to trigger the button.</p>

<input id="myInput" value="Some text..">
<button id="myBtn" type="submit" onclick="javascript:alert('Hello World!')">Button</button>


</body>
</html>

  1. w3schools
    2. 的示例
  2. stackoverflow
    3. 上的示例

请记住，您需要将 

type="submit"
添加到该按钮......！否则它无法在移动设备上正常工作...

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.