ios微信浏览器input事件

Posted 2023-05-06

参考技术A ios微信浏览器中input事件指的是当用户在输入框中输入或者删除内容触发的事件。在iOS微信浏览器中，常见的input事件包括：

1. input：在文本框中输入、粘贴或剪切文本时触发。

2. change：当输入框内容发生变化并且失去焦点时触发。

3. focus：当输入框获得焦点时触发。

4. blur：当输入框失去焦点时触发。

5. input[type="checkbox"]/input[type="radio"]：当复选框或单选框被选中或取消选中时触发。

6. input[type="file"]：当文件选择框中选中文件后触发。

需要注意的是，在iOS微信浏览器中，input事件有一定的延迟，因此可能会影响实时性需求较高的场景。此外，不同的浏览器对于input事件的实现方式也有所不同，因此在编写代码时需要注意兼容性问题。

移动端弹出软键盘导致input光标和点击事件错位问题

我遇到的问题：在微信浏览器里，点击蒙层的input框，弹出软键盘，蒙层被顶上去，同时input的焦点和button的点击事件也被顶上去了，软键盘消失，蒙层回到原位，但是点击input和button均没反应，点击蒙层被顶上去的位置有反应，因为input的焦点和button的点击事件没回到原位。这个问题出现在ios中，android手机没问题。

以下是一位大佬写的解决方法，解决了我的问题。

原文地址：https://blog.csdn.net/Doubleu_/article/details/86596569

原因：移动端页面的定位会影响光标位置。移动端在点击input输入的时候软键盘弹出，整个页面被键盘往上挤压，然而光标的位置也被挤压，收起软键盘的时候页面恢复，但是光标还是在原来input的位置，就导致光标不在该在的地方，整个页面呈现无法点击的状态，用户体验极差。

解决方法：

方法一：在软键盘收起(也就是失焦)的时候scrollTop回顶部，或者使用window.reload()。

$("input").blur(function()
    setTimeout(function()
    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
    ,100)
)

方法二：使用reload

$(‘textarea,input[type=text]‘).focus(function () 
   window.setTimeout(‘scrollBottom()‘, 500);
);
function scrollBottom() 
   window.scrollTo(0, $(‘body‘).height());