移动端Chrome中textarea有内容且键盘打开时按钮点击失效问题

这个问题我之前做移动端表单时也碰到过，属于Chrome移动端在软键盘弹出时的常见事件触发坑！当软键盘展开时，页面的视口和元素布局会发生变化，加上焦点还停留在textarea上，就会导致按钮的click事件无法被正确捕获。下面给你几个实用的解决方案：

方案1：改用touchstart + click双事件绑定 #

移动端的click事件有300ms延迟，而且在软键盘弹出时容易出现事件丢失，换成touchstart能更快响应触摸操作，同时保留click兼容桌面端：

$("#send").on("touchstart click", function (e) {
    e.preventDefault(); // 避免同时触发touchstart和click导致重复执行
    console.log(new Date());
});

方案2：修复页面视口设置 #

如果你的页面没有正确设置视口，软键盘弹出时页面会被拉伸，导致按钮的实际点击区域和视觉位置偏移。在HTML头部添加正确的meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

这个标签能确保页面在移动端的布局和视口一致，避免因缩放导致的点击错位。

方案3：点击按钮时强制让textarea失去焦点 #

当焦点停留在textarea时，Chrome会优先处理输入相关的事件，可能会忽略按钮的点击。我们可以在点击按钮时先让textarea失去焦点：

$("#send").on("click", function (e) {
    $("#message").blur(); // 收起软键盘并移除textarea的焦点
    console.log(new Date());
});

额外调试建议 #

• 用Chrome开发者工具的Device Toolbar模拟移动端，打开软键盘后检查按钮的实际位置（可以用Elements面板查看元素的盒模型），确认点击区域是否正确；
• 检查按钮或其父元素有没有设置pointer-events: none这类会阻止点击的CSS属性；
• 确保你的jQuery版本是较新的，旧版本可能存在移动端事件处理的bug。

试试上面的方法，应该能解决你的问题！我之前处理类似表单时，方案1的双事件绑定是最稳妥的。

内容的提问来源于stack exchange，提问作者ramires.cabral