mui+回复弹出软键盘

拟墨画扇 提交于 2020-01-02 18:21:09

最近再做一个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('缩回');
    };
};

完美。

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!