使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。
转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢
问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。
解决:
//获取当前页面(在子页面上书写)
var ws;
if(window.plus) {
plusReady();
}else {
document.addEventListener(“plusready”, function() {
plusReady();
}, false);
}
function plusReady() {
ws = plus.webview.currentWebview();
}
//获取当前页面的input
var search = document.querySelector(‘#input’);
search.onfocus = function(){
//设置父页面的导航栏隐藏
ws.parent().evalJS(“document.getElementById(‘nav’).style.display=’none’”);
//当前子Webview窗口的样式()
ws.setStyle({bottom: ‘0px’});
}
search.onblur = function(){
//设置父页面的导航栏显示
ws.parent().evalJS(“document.getElementById(‘nav’).style.display=’block’”);
//当前子Webview窗口的样式(和子页面在父页面上的bottom保持一致)
ws.setStyle({bottom: ‘50px’});
}`
————————————————
版权声明:本文为CSDN博主「elementFei」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/elementFei/article/details/72917393
使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。的更多相关文章
- input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() { var ...
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...
- 小程序中点击input控件键盘弹出时placeholder文字上移
最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...
- 移动端解决input focus后键盘弹出,高度被挤压的问题
//解决弹出键盘页面高度变化bug var viewHeight = window.innerHeight; //获取可视区域高度 $("input").focus(functio ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):带有字体图标的导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- iOS开发实用技巧—在手机浏览器头部弹出app应用下载提示
iOS开发实用技巧—在手机浏览器头部弹出app应用下载提示 本文介绍其简单使用: 第一步:在本地建立一个访问的服务端. 打开本地终端,在本地新建一个文件夹,在该文件夹中存放测试的html页面. ...
- 解决input获取焦点时底部菜单被顶上来问题
<div class="search-box"> <input class="search-input" type="text&qu ...
- web移动端Fixed在Input获取焦点时ios下产生的BUG及处理
1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...
- mui底部导航栏切换分页
使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
随机推荐
- 寒假day19
今天编写了人才动态模块,同时刷了一些算法题.
- 中后缀表达式/洛谷P1175 表达式的转换
P1175 表达式的转换 思路:先用栈转成中缀表达式,再用栈进行计算.要输出过程,因此计算一次输出一次,但是栈没有迭代器,不好用,换成vector(可以pop_back).虽然表达式求值也可以这么做, ...
- Codeforces 1291A - Even But Not Even
题目大意: 给定一个字符串数字(很大) 问能不能删除一些数字(或者不删除) 使得剩余的数字各位数相加是偶数,但是这整个数字是个奇数 解题思路: 统计字符串中单个数字奇数的个数 分情况 个数为0或者1时 ...
- JS/JQUERY函数库
1. 判断字符串是否为空 function isEmptyString(str) { return str == undefined || str == "" || str == ...
- ORACLE自增函数,一般函数
1.UNIX时间与普通时间互相转换 1.ORACLE先创建函数方法,再直接使用,MySQL直接使用方法UNIX_TIMESTAMP,FROM_UNIXTIME oracle_to_unix(creat ...
- C++实现顺序表的14种操作
C++顺序表的操作 2017-12-27 // 顺序表.cpp: 定义控制台应用程序的入口点. //Author:kgvito YinZongYao //Date: 2017.12.27 #inclu ...
- 80.常用的返回QuerySet对象的方法使用详解:order_by
order_by: 将模型生成的表按照某个字段进行排序,默认情况下,按照升序的顺序排序,如果想要按照降序的顺序排序可以在字段的前面加一个"-",加一个负号就可以进行反转. mode ...
- 落地即王道,锁死企业智变CP——云+AI
国庆前夜,"70年,我是主角"的微电影引发网络热议,这是人民日报新媒体和电影频道联手打造.京东云和京东AI提供技术支持.这是中国首部全民定制国庆献礼片,网友只要上传正脸照片,就能通 ...
- 吴裕雄--天生自然MySQL学习笔记:MySQL 导出数据
MySQL中可以使用SELECT...INTO OUTFILE语句来简单的导出数据到文本文件上. 使用 SELECT ... INTO OUTFILE 语句导出数据 以下实例中将数据表 runoob_ ...
- ssh首次链接出现yes/no提示和ansible提示
修改文件: /etc/ssh/ssh_config 在文件中添加如下信息:StrictHostKeyChecking no 改本机的/etc/ssh/ssh_config文件中的"# Str ...