<center><font size = "6px">H5混合开发软键盘适配方案</font></center>javascript
当前端界面的输入框位于页面底部,键盘唤醒时,就会遮挡输入框。此时用户在输入时就不能看到已经输入的内容,形成很很差的用户体验。前端
原生键盘的唤醒方式大概分为两种,一种是平铺在页面上,和页面不属于同一层级;另外一种是键盘唤醒时将页面向上挤压,使其位于同一层级。这里咱们采用第二种方案。当键盘唤醒时,将整个webview向上挤压,页面向上挤压的高度为键盘的高度。此时预想的结果是实现qq微信发送消息的效果。java
android代码:android
cordova.getActivity().runOnUiThread(new Runnable() { @Override public void run() { cordova.getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE); callbackContext.success(); } });
在这里前端不须要作处理。本觉得这个方案是最完美的。但是发现ios11.1和ios11.2不生效。这就很头疼了。为了适配ios,不得不想新的解决思路。ios
综合考虑了android和ios的版本问题,这里咱们采用不一样系统采用不一样处理方式的方案。经过前端判断设备类型,在输入框获取焦点的时候,进行下一步处理。android采起以上的实现方式。ios就采起下面要说的这种方式。web
根据ios的特性,咱们采起前端处理的方式来实现。当前端获取到焦点时,将整个body向上推。类型于第一种方式,只不过是前端来处理。微信
前端代码:ide
var scrollTime; var timerId; if(typeof (device)!="undefined"&&device.platform=='iOS'){ let num = 0; scrollTime = setInterval(function(){ timerId = true; if (num < 9) { num++; } else { clearInterval(scrollTime); timerId = null; document.body.scrollTop = document.body.scrollHeight; return; } document.body.scrollTop = document.body.scrollHeight; },100) }
下面来说一下原理:code
在获取焦点时,执行以上代码。由于键盘弹起有一个延迟,咱们在这里写了一个定时器,来实现这个过分。就能实现相似于qq微信的效果了。orm
这里须要注意的是,在失去焦点的时候,咱们要清除这个定时器。再执行
document.body.scrollTop = document.body.scrollHeight;
达到完美过分的效果。固然,想实现顺滑的效果,仍是用原生写吧。