最近再做一个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代码:
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(); // 监听点击事件 showInputObj.addEventListener(‘tap‘,function(){ clickShowSoftInput(); }); });
经测试没有问题。
原文地址:https://www.cnblogs.com/e0yu/p/10364952.html
时间: 2024-09-30 19:15:52