javascript - 显示键盘时未在移动设备中触发提交事件

标签 javascript android jquery ajax forms

使用 Jquery 1.11.1 我在表单提交时发送 ajax 请求:

...
contactForm.on('submit', function(e) {
  e.preventDefault();
  $.ajax({...});
...

该表单是由输入文本、文本区域和提交按钮组成的 ContactForm。

正在运行桌面模式 (Chrome, Firefox, IE,...) 没有问题:提交事件被触发,ajax 调用运行良好。

当我提交表格 在移动设备中 (Android,Ios,...)虽然显示键盘,但未提交表单。
如果我隐藏键盘,然后点击提交按钮,则表单已提交并且 ajax 调用工作正常。

问题是在移动设备中显示键盘时未触发提交事件。

您可以在屏幕截图中看到键盘显示(绿色按钮是提交):
The button is green

最佳答案

(我有同样的问题,但在不同的情况下,因此我对它进行了不同的描述并发布了一个新问题:Android Chrome click after keyboard entry not working)
解决方案归结为触发 blur() 的这段 JavaScript。在输入元素/文本区域:

document.querySelectorAll('input, textarea').forEach((input) => {
  input.addEventListener('input', (e) => {
    e.target.blur();
    e.target.focus();
  })
})

关于javascript - 显示键盘时未在移动设备中触发提交事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32180260/

相关文章:

javascript - 在浏览器中打开 URL 时 react 滚动到 anchor

javascript - 模型更新后, Angular 过滤器不会更新 View

javascript - Node JS REST API,现在如何提供 HTML 文件?

android - 为 Android 发布登录 gradle.properties

Android位图分配怪异

javascript - 面向对象的 Javascript 中的“This”

javascript - 我需要在悬停时使用选择器并在悬停外使用变量集来查找特定链接

android - 如何在 ScrollView 中实现弹跳?

javascript - 以相同的形式重定向到不同的 URL

jquery - 页面加载时元素高度的差异