使用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=" ...
随机推荐
- 身边的人工智能&人工智能发展史
智能家具 扫地机器人 智能音箱 个人助手 在线翻译 谷歌翻译 微软翻译 YouTube 视频翻译 图像识别 人脸识别 AI+摄像头 下棋高手 Alphago 2017年打败柯洁 成为世界第一 Alph ...
- redis常用命令--基础
redis默认有个数据库,下标从开始,不支持自定义数据库名字. 使用select index 切换数据库 : select 7 (切换到第八个数据库) dbsize:求当前数据库中键值对的数量. ...
- 并发与高并发(十三)J.U.C之AQS
前言 什么是AQS,是AbstractQueuedSynchronizer类的简称.J.U.C大大提高了并发的性能,而AQS又是J.U.S的核心. 主体概要 J.U.C之AQS介绍 J.U.C之AQS ...
- VBA单元格自适应高亮操作
1.单元格所在行和列高亮 第一种方式 Private Sub worksheet_selectionchange(ByVal target As Range) Cells.Interior.Color ...
- Idea的类中使用实体类(有@Data注解)的Get/Set方法报错
今天从svn上面下了一个maven项目,导入到Idea中之后,发现有的类会使用实体类的Set/Get方法(全报错),导致该问题的原因就是因为实体类中没有这个方法,代码类似如下: @Data publi ...
- CNN:扩张卷积输出分辨率计算
扩张卷积(Dilated convolutions)是另一种卷积操作,也叫做空洞卷积(Atrous convolution).相比于普通的卷积,相同的卷积核,空洞卷积能够拥有更大的感受野. 相同的卷积 ...
- clion之CMakeLists的学习
什么是CMake CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的" ...
- 《C Primer Plus》- 第一章 初试C语言
本笔记写于2020年1月25日. 从今天开始,我要全面的.彻底的将未来计划中所有的知识重新规划学习一遍,并整理成一套全面的笔记体系.为我将来的职业打下坚实的基础.而所有的一切从C语言开始. 本系列文章 ...
- Java 接口理解
学习Spring有一段时间了,对java也有了一点了解,最不能理解的就是接口, 即使是写了接口并实现了它,依然无法理解它到底有什么用?看了其他几篇博客,总结了一下自己的理解. 在JAVA编程语言中是一 ...
- 0CTF-2016-piapiapia-PHP反序列化长度变化尾部字符串逃逸
0X00 扫描一下网站目录,得到网站源码,这里说下工具使用的是dirmap,亲测御剑不好用... 0x01 审计源码: index.php <?php require_once('class.p ...