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

Posted 2023-05-07

【中文标题】显示键盘时未在移动设备中触发提交事件

【英文标题】：Submit event not triggerd in mobile device when keyboard is shown

【发布时间】：2015-11-17 18:08:54

【问题描述】：

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

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

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

在桌面模式（Chrome、Firefox、IE、...）运行没有问题：提交事件被触发，ajax调用运行良好。

当我在显示键盘时在移动设备（android、ios、...）中提交表单时，未提交表单。 如果我隐藏键盘，然后点击提交按钮，则表单已提交并且 ajax 调用工作正常。

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

您可以在屏幕截图中看到键盘显示（绿色按钮是提交）：

【问题讨论】：

如何在移动设备上关注提交按钮？当您设置焦点时，键盘是否可以按 Enter 键？

如果我向下滚动页面，则会显示键盘，我可以点击绿色按钮

有同样的问题。你解决了吗？

看来对我有帮助***.com/questions/24306818/…

【参考方案1】：

（我遇到了同样的问题，但在不同的情况下，因此我对它进行了不同的描述并发布了一个新问题：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();
  )
)