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+回复弹出软键盘的更多相关文章
- (转载) EditText初始不弹出软键盘,只有光标显示,点击再弹出
EditText初始不弹出软键盘,只有光标显示,点击再弹出 2013-06-08 10:13 21305人阅读 评论(5) 收藏 举报 分类: android基础(91) 版权声明:本文为博主原创 ...
- (原)android的alertdialog中加入edittext但是不弹出软键盘等问题的解决与原因
摘要:alertdialog中加入edittext但是不弹出软键盘等问题网上有很多不管用的解决方案, 本文意在给出更有效的解决办法,并初步探究其原因 正文 在对话框中插入文本框是十分常见的需求 通常我 ...
- EditText根据焦点弹出软键盘
//每次启动都清除焦点 myCourse_roomId_input.setText(""); myCourse_roomId_input.clearFocus(); //判断是否获 ...
- ios下input focus弹出软键盘造成fixed元素位置移位
正常状态下 input focus软键盘弹出时 问题描述: 头部结构fixed,滚动到下部内容区域,input.textarea等focus弹出软键盘时,头部位置偏移被居中(该问题ios7 beta3 ...
- EditText默认不弹出软键盘
#EditText默认不弹出软键盘# 网上关于EditText默认情况下不弹出软键盘,当手触摸到EditText,获取焦点时候,才会弹出软键盘,貌似都不能用,其实,在oncreate()方法中,加上 ...
- EditText 默认不获取焦点,弹出软键盘布局变形解决方案
关于弹出软键盘布局变形解决方案: 在androidMainfest.xml文件中在此Activity中写入 android:windowSoftInputMode="adjustPan&qu ...
- [Phonegap+Sencha Touch] 移动开发24 包wp8.1的App,弹出软键盘输入框聚焦实施后,无移动采收率方法来解决接口
这种现象不仅是现在显示phonegap包sencha touch的wp8.1该程序将出现(只wp8.1,wp8正常).其他js我测试了几个框架(app framework, jquery mobile ...
- [Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,执行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决的方法
这个现象仅仅出如今phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其他js框架我測试了几个(app framework, jquery mobile), ...
- AppCompatActivity 去掉标题栏和EditText弹出软键盘遮住输入框问题
1. AppCompatActivity去掉标题栏 此处除掉标题栏,需要注意一点,AppCompactActivity是继承自Activity.然而,AppCompactActivity据查看网上资料 ...
随机推荐
- 奇怪吸引子---RayleighBenard
奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...
- RPC框架-hessian学习
先说说hessian有什么优点和缺点 一.优点: 比 Java 原生的对象序列化/反序列化速度更快, 序列化出来以后的数据更小.序列化协议跟应用层协议无关, 可以将 Hessian 序列化以后的数据放 ...
- vmlinux,zImage,bzImage,vmlinuz,uImage,关系
zImage和uImage的区别 一.vmlinuz vmlinuz是可引导的.压缩的内核.“vm”代表“Virtual Memory”.Linux 支持虚拟内存,不像老的操作系统比如DOS有640K ...
- 使用EF操作不同数据库(以SQLite为例)
最近一直在和数据库作对. 从安卓平台上给了我个SQLite数据库,要求程序能够读取不同的文件.由于字段实在太多,不愿意直接使用原来直接读取datatable的方式来做,手动写映射太痛苦...于是想起来 ...
- SNF快速开发平台MVC-表格单元格合并组件
1. 表格单元格合并组件 1.1. 效果展示 1.1.1. 页面展现表格合并单元格 图 4.1 1.1.2. 导出excel合并单元格 图 4.2 1.2. 调用说 ...
- 性能测试工具jmeter的安装
1.mac安装jmeter 参考博客:https://blog.csdn.net/shendezhuti/article/details/77972297
- 解决CentOS缺少共享库
# ./aapt dump bading ./tmp/app_xxxx.apk ./appt:error while loading shared libraries: libraries: libs ...
- 【Android】Android布局文件的一些属性值
第一类:属性值 true或者 false android:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 androi ...
- requestNextAnimationFrame兼容主浏览器方法
window.requestNextAnimationFrame = (function () { var originalRequestAnimationFrame = undefined, wra ...
- Mac 抓包工具wireshark使用
共四部分 1.wireshark简介 2.wireshark mac版安装 3.wireshark 抓取普通http 4.高级应用 1.wireshark 简介(百度百科) Wireshark(前称E ...