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据查看网上资料 ...
随机推荐
- 微信nickname乱码(emoji)及mysql编码格式设置(utf8mb4)解决的过程
转:https://segmentfault.com/a/1190000004594385 项目中涉及保存微信的nickname,之前一直正常使用,但是突然遇到一个之前没有遇到的问题.经过调试发现错误 ...
- C#中Invoke的用法1
invoke和begininvoke 区别 一直对invoke和begininvoke的使用和概念比较混乱,这两天看了些资料,对这两个的用法和原理有了些新的认识和理解. 首先说下,invoke和be ...
- 在 Swift 中调用 OC 代码
前言 在 Swift 语言中,我们可以使用 Objective-C.C 语言编写代码,我们可以导入任意用 Objective-C 写的 Cocoa 平台框架.Objective-C 框架或 C 类库. ...
- [Aaronyang] 写给自己的WPF4.5 笔记13[二维自定义控件技巧-可视化状态实战,自定义容器,注册类命令,用户控件补充]
我的文章一定要做到对读者负责,否则就是失败的文章 --------- www.ayjs.net aaronyang技术分享 博文摘要:欢迎大家来支持我的<2013-2015 Aar ...
- golang ---tcmalloc浅析
总体结构 在tcmalloc内存管理的体系之中,一共有三个层次:ThreadCache.CentralCache.PageHeap,如上图所示.分配内存和释放内存的时候都是按从前到后的顺序,在各个层次 ...
- 12C -- DDL日志
DDL日志和alert日志有相似的格式和行为.但是只包含DDL语句日志.oracle只是为数据库组件提供DDL日志,且需要将参数enable_ddl_logging设置为true. 在DDL日志中,每 ...
- Effective Java 第三版——56. 为所有已公开的API元素编写文档注释
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- String的split方法支持正则表达式
String的split方法支持正则表达式: 1. 正则表达式\s表示匹配任何空白字符 2. +表示匹配一次或多次
- 深入理解Fsync
1 介绍 数据库系统从诞生那天开始,就面对一个很棘手的问题,fsync的性能问题.组提交(group commit)就是为了解决fsync的问题.最近,遇到一个业务反映MySQL创建分区表很慢,仔细分 ...
- [svc]二三层数据格式&&三层数据如何匹配路由
网络知识拾遗 tcpip的4&7层模型 PDU数据包在不同层的不同称呼 物理层(一层)PDU指数据位(Bit). 数据链路层(二层)PDU指数据帧(Frame). 网络层(三层)PDU指数据包 ...