或许这些就是你想要的输入法框上的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按钮被触发时，输入框不会失去焦点，软键盘也会塌陷。监听软键盘的弹出和折叠根据上述键盘弹出和折叠在IOS和Android上的不同表现，我们可以分别进行如下处理来监听软键盘的弹出和折叠keyboard：在IOS上监听输入框focus事件用来知道软键盘弹出，监听输入框的blur事件知道软键盘关闭。在Android上，监控webview的高度会发生变化，高度变小就知道软键盘弹出，否则软键盘会缩回。//判断设备类型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键盘弹出:IOS和Android输入框获得焦点弹出键盘$input.addEventListener('focus',function(){console.log('IOS键盘弹出!');//IOS键盘弹出后的操作},false)//IOS键盘收回：IOS点击输入框外区域或点击收回按钮，输入框失去焦点，键盘收回，$input.addEventListener('blur',()=>{console.log('IOS键盘收起！');//IOS键盘收起})}//Andriod键盘收起：Andriod键盘弹出或收起时页面高度会发生变化，基于键盘缩回if(judgeDeviceType.isAndroid){varoriginHeight=document.documentElement.clientHeight||文档.body.clientHeight；window.addEventListener('resize',function(){varresizeHeight=document.documentElement.clientHeight||document.body.clientHeight;if(originHeight
一些聊天内容1