H5混合开发软键盘适配方案

dailybird 发布于2019-08-23 17:13 / 2433人阅读

摘要：混合开发软键盘适配方案现象当前端界面的输入框位于页面底部，键盘唤醒时，就会遮挡输入框。当键盘唤醒时，将整个向上挤压，页面向上挤压的高度为键盘的高度。本以为这个方案是最完美的。可是发现和不生效。采取以上的实现方式。

H5混合开发软键盘适配方案

现象：

当前端界面的输入框位于页面底部，键盘唤醒时，就会遮挡输入框。此时用户在输入时就不能看到已经输入的内容，造成很不好的用户体验。

思路分析：

原生键盘的唤醒方式大概分为两种，一种是平铺在页面上，和页面不属于同一层级；另一种是键盘唤醒时将页面向上挤压，使其位于同一层级。这里我们采用第二种方案。当键盘唤醒时，将整个webview向上挤压，页面向上挤压的高度为键盘的高度。此时预想的结果是实现qq微信发送消息的效果。

实现方式：

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，不得不想新的解决思路。

改变思路：

综合考虑了android和ios的版本问题，这里我们采用不同系统采用不同处理方式的方案。通过前端判断设备类型，在输入框获取焦点的时候，进行下一步处理。android采取以上的实现方式。ios就采取下面要说的这种方式。

ios实现方式：

根据ios的特性，我们采取前端处理的方式来实现。当前端获取到焦点时，将整个body向上推。类型于第一种方式，只不过是前端来处理。

前端代码：

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)
}

下面来讲一下原理：

在获取焦点时，执行以上代码。因为键盘弹起有一个延迟，我们在这里写了一个定时器，来实现这个过度。就能实现类似于qq微信的效果了。

这里需要注意的是，在失去焦点的时候，我们要清除这个定时器。再执行

document.body.scrollTop = document.body.scrollHeight;

达到完美过度的效果。当然，想实现顺滑的效果，还是用原生写吧。

GPU云服务器云服务器软键盘软键盘遮挡关闭软键盘隐藏软键盘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104005.html

移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
Android软键盘弹出，覆盖h5页面输入框问题

摘要：代码调试去除的，给添加一个正好能让软键盘弹出后遮住输入框的高度，高度软键盘出现后高度输入框高度保存按钮高度，发现键盘弹出遮挡着后，框会自动上移到可视区内，问题定位成功。 Android软键盘弹出，覆盖h5页面输入框问题移动端开发过程中，我们经常遇到h5表单录入页面，在Android系统webview中，由于软键盘弹出，导致覆盖 h5页面输入框问题，在此进行回顾并分享给大家系统：An...

gclove 2019-08-30 15:54 评论0 收藏0
Android软键盘弹出，覆盖h5页面输入框问题

摘要：代码调试去除的，给添加一个正好能让软键盘弹出后遮住输入框的高度，高度软键盘出现后高度输入框高度保存按钮高度，发现键盘弹出遮挡着后，框会自动上移到可视区内，问题定位成功。 Android软键盘弹出，覆盖h5页面输入框问题移动端开发过程中，我们经常遇到h5表单录入页面，在Android系统webview中，由于软键盘弹出，导致覆盖 h5页面输入框问题，在此进行回顾并分享给大家系统：An...

URLOS 2019-08-02 13:56 评论0 收藏0
Android软键盘弹出，覆盖h5页面输入框问题

摘要：代码调试去除的，给添加一个正好能让软键盘弹出后遮住输入框的高度，高度软键盘出现后高度输入框高度保存按钮高度，发现键盘弹出遮挡着后，框会自动上移到可视区内，问题定位成功。 Android软键盘弹出，覆盖h5页面输入框问题移动端开发过程中，我们经常遇到h5表单录入页面，在Android系统webview中，由于软键盘弹出，导致覆盖 h5页面输入框问题，在此进行回顾并分享给大家系统：An...

Honwhy 2019-08-23 14:12 评论0 收藏0