使用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=" ...
随机推荐
- CCCC 连续因子
题意: 一个正整数N的因子中可能存在若干连续的数字.例如630可以分解为3*5*6*7,其中5.6.7就是3个连续的数字.给定任一正整数N,要求编写程序求出最长连续因子的个数,并输出最小的连续因子序列 ...
- python查找数组中出现次数最多的元素
方法1-np.argmax(np.bincount()) 看一个例子 array = [0,1,2,2,3,4,4,4,5,6] print(np.bincount(array)) print(np. ...
- GPU 、APU、CUDA、TPU、FPGA介绍
购买显卡主要关注:显存.带宽和浮点运算数量 GPU :图形处理器(英语:Graphics Processing Unit,缩写:GPU),又称显示核心.视觉处理器.显示芯片,是一种专门在个人电脑. ...
- 题解 P1220 【关路灯】
区间DP, 考虑设\(dp[i][j][t]\)为已经关掉了\([i,j]\)的电灯, 人在t端点处时的最小代价 可以推出方程: \[ dp[i+1][j][0]+(p[n]-p[j]+p[i])*( ...
- 创建简单spring boot项目
简介 使用spring boot可以轻松创建独立的,基于Spring框架的生产级别应用程序.Spring boot应用程序只需要很少的spring配置 特点 创建独立的Spring应用程序 直接嵌入t ...
- 证书打印CSS知识点总结
需求: 1.证书内容动态填充: 2.证书背景图不要求打印,只为展示作用: 3.打印内容兼容屏幕分辨率: 实现: <!-- 外层div宽度为背景图片宽 --> <div style=& ...
- UVA 11468 AC 自动机
首先我们应该是枚举 L个位置上的每个字符来得到最终概率 然后AC自动机的作用就是为了判断你枚举的地方是否对应了单词节点,如果对应了,就肯定要不得 #include <iostream> # ...
- Oracle数据库中表的imp&exp
在Oracle数据库中可以使用imp和exp命令来执行数据的导入导出(包括表结构和数据),使用imp和exp命令执行导入导出操作必需的是需要安装Oracle数据库,系统安装Oracle数据库,可以识别 ...
- 对象创建模式之模块模式(Module Pattern)
模块模式可以提供软件架构,为不断增长的代码提供组织形式.JavaScript没有提供package的语言表示,但我们可以通过模块模式来分解并组织代码块,这些黑盒的代码块内的功能可以根据不断变化的软件需 ...
- 分布式场景下Kafka消息顺序性的思考
如果业务中,对于kafka发送消息异步消费的场景,在业务上需要实现在消费时实现顺序消费, 利用kafka在partition内消息有序的特点,消息消费时的有序性. 1.在发送消息时,通过指定parti ...