或许这些就是你想要的输入法框上的H5软键盘兼容解决方案。需求很明确，看似很简单，其实不然。从部分机型的实验来看，主要问题如下：在Android和IOS上，已知软键盘的弹出和缩回状态不同，页面webview表现不同。IOS12，微信版本v6.7.4及以上，输入框获取焦点，键盘弹出，页面（webview）整体向上滚动。键盘收起后，没有回到原来的位置，导致键盘原位空白。IOS上，使用第三方输入法，高度计算存在偏差，导致部分输入法弹出，部分遮挡输入框。在某些浏览器上使用一些操作技巧，输入框仍然被输入法挡住。下面我们就针对上述问题一一探讨解决方法。知道软键盘的上下状态知道软键盘是向上还是向下是非常重要的，下面的兼容处理必须基于此。但是H5并没有直接监听软键盘的原生事件，只能通过软键盘的弹出或者收回来间接监听，触发页面其他方面的表现，曲线救国。此外，它在IOS和Android上的工作方式也不尽相同。IOS软键盘弹出IOS上，输入框（input，textarea或富文本）获得焦点，弹出键盘，页面（webview）没有压缩，或者高度（height）没有变化，只是页面(webview)整体向上滚动，最大滚动高度(scrollTop)为软键盘高度。Android软键盘弹出的表现也是一样的。在Android上，输入框获得焦点，弹出键盘，但是页面（webview）的高度会发生变化。一般来说，高度就是可见区域的高度（原始高度减去软键盘的高度），除了因为页面内容被拉伸会发生滚动外，webview本身是不能滚动的。IOS软键盘折叠表现当触发软键盘或输入框外页面区域的“折叠”按钮时，输入框失去焦点，软键盘折叠。Android软键盘折叠触发输入框外区域时，输入框失去焦点，软键盘折叠。但是当键盘上的retract按钮被触发时，输入框不会失去焦点，软键盘也会塌陷。//判断设备类型varjudgeDeviceType=function(){varua=window.navigator.userAgent.toLocaleLowerCase();varisIOS=/iphone|ipad|ipod/.test(ua);varisAndroid=/android/.test(ua);return{isIOS:isIOS,isAndroid:isAndroid}}()//监听输入框软键盘的弹出和关闭事件functionlistenKeybord($input){if(judgeDeviceType.isIOS){//IOS键盘弹出-up:IOS和Android输入框获得焦点弹出键盘$input.addEventListener('focus',function(){console.log('IOS键盘弹出!');//IOS键盘后操作popsup},false)//IOS键盘关闭开始：IOS点击输入框外区域或点击收起按钮，输入框失去焦点，键盘收起，$input.addEventListener('blur',()=>{console.log('IOS键盘收回！');//IOS键盘收回后操作})}//Andriod键盘收回：Andriod键盘弹出时页面高度会发生变化或收回，基于wh如果(judgeDeviceType.isAndroid){varoriginHeight=document.documentElement.clientHeight||document.body.clientHeight;window.addEventListener('resize',function(){varresizeHeight=document.documentElement.clientHeight||document.body.clientHeight;if(originHeight
一些聊天内容1