mui+回复弹出软键盘

最近再做一个APP的时候，有一个评论回复的功能，在做APP的时候，直接用手指触发focus事件，来唤醒软键盘的弹出没有问题，但是现在的功能需要对点击回复进行弹出软键盘来操作，参考过很多都有问题，后来仔细看了下官方的DEMO，发下这个问题是可以被解决掉的。具体方法如下：

<style type="text/css">

.show-input-main{width: 100%; height:40px; border: 1px solid red;  position: fixed; left:0px; bottom:0px; z-index: 20;}

.show-input-box{width: 100%; height:40px; padding-right:55px;}

.input-box{width: 100%; height:100%; background:yellow;}

.input-box-btn{width: 55px; height: 100%; background: #007aff; position: absolute; top:0px; right:0px; text-align:center; line-height: 40px; color:#fff; font-size:16px;}

#textarea-input{width: 100%; height:38px; border:1px solid #fff; line-height: 24px; min-height:38px; margin:0px; padding:5px 2px; }

</style>

<div class="mui-input-row">

    <button id="showInput">点我回复</button>

</div>

<div class="mui-input-row show-input-main">

    <div class="show-input-box">

        <div class="input-box">

            <textarea id="textarea-input"></textarea>

        </div>

        <div class="input-box-btn">发送</div>

    </div>

</div>

具体JS代码：

mui.init({

    swipeBack: true //启用右滑关闭功能

});

 //语音识别完成事件

document.getElementById("search").addEventListener('recognized', function(e) {

    console.log(e.detail.value);

});

var nativeWebview, imm, InputMethodManager;

var initNativeObjects = function() {

    if (mui.os.android) {

        var main = plus.android.runtimeMainActivity();

        var Context = plus.android.importClass("android.content.Context");

        InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");

        imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);

    } else {

        nativeWebview = plus.webview.currentWebview().nativeInstanceObject();

    }

};

var showSoftInput = function() {

    if (mui.os.android) {

        imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);

    } else {

        nativeWebview.plusCallMethod({

            "setKeyboardDisplayRequiresUserAction": false

        });

    }

    setTimeout(function() {

        var inputElem = document.querySelector('input');

        inputElem.focus();

        inputElem.parentNode.classList.add('mui-active'); //第一个是search，加上激活样式

    }, 200);

};

var showInputObj = document.getElementById('showInput');

var clickShowSoftInput = function(){

    if (mui.os.android) {

        imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);

    } else {

        nativeWebview.plusCallMethod({

            "setKeyboardDisplayRequiresUserAction": false

        });

    }

    setTimeout(function() {

        var inputElem = document.querySelector('#textarea-input');

        inputElem.focus();

        inputElem.parentNode.classList.add('mui-active'); //第一个是search，加上激活样式

    }, 200);

};

mui.plusReady(function() {

    initNativeObjects();

    // showSoftInput();

    // 监听点击事件

    showInputObj.addEventListener('tap',function(){

        clickShowSoftInput();

    });

});

经测试没有问题。

正常模式使用这个的时候是没有问题的，但如果APP项目采用的是沉浸式模式，使用这个方法，发现弹出的软键盘会遮挡固定定位的输入框，解决办法是监听软键盘的弹出操作，添加类或样式来进行调整：

var winHeight = $(window).height();

window.onresize = function(){

    var thisHeight = $(window).height();

    if(winHeight - thisHeight > 50){

        console.log('弹出');

    }else{

        console.log('缩回');

    };

};

完美。

巴特西

mui+回复弹出软键盘

最新文章

热门文章