可能这些是你想要的H5软键盘兼容方案

其实这是 Apple 在 IOS 的 bug，会出现在所有的 Xcode10 打包的 IOS12 的设备上。微信官方已给出解决方案，只需在软键盘收起后，将页面(webview)滚回到窗口最底部位置(clientHeight位置)。修复后的上面表单输入 demo 可以戳这里：

console.log('IOS 键盘收起啦!');  
// IOS 键盘收起后操作  
// 微信浏览器版本6.7.4+IOS12会出现键盘收起后，视图被顶上去了没有下来  
var wechatInfo = window.navigator.userAgent.match(/MicroMessenger/([d.]+)/i);  
if (!wechatInfo) return;  
var wechatVersion = wechatInfo[1];  
var version = (navigator.appVersion).match(/OS (d+)_(d+)_?(d+)?/);  
if (+wechatVersion.replace(/./g, '') >= 674 && +version[1] >= 12) {  
window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));  
}  

兼容第三方输入法

上面说了那么多，其实已经把 H5 聊天输入框的坑填了一大半了，接下来就先看下聊天输入框的基本HTML结构。

<div class="chat__content">  
  <div>  
    <p>一些聊天内容1</p>  
  </div>  
  <!-- 省略几千行聊天内容 -->  
</div>  
<div class="input__content">  
  <div class="input" contenteditable="true"></div>  
  <button>发送</button>  
</div> 

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!