使用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=" ...
随机推荐
- java中流的注意事项
缓冲流 缓冲流继承自过滤流,使用缓冲流时一些要注意的知识点: 1.如果在缓冲流对象创建时使用了其他流,最后关闭时只需关闭缓冲流就可以了,其他流会跟着自动关闭. 2.缓冲字符输入流(BufferedRe ...
- POJ 1141 经典DP 轨迹打印
又几天没写博客了,大二的生活实在好忙碌啊,开了五门专业课,每周都是实验啊实验啊实验啊....我说要本月刷够60题,但好像完不成了,也就每天1题的样子.如今写动规还是挺有条理的,包括这道需要打印轨迹,其 ...
- 基于python的arcgis底图添加(转)
本文翻译自:Qingkai‘s Blog 当使用python的Basemap库绘制地图时,选择一个漂亮的底图会为图片增色不少,但是使用map.bluemarble().map.etopo()或者map ...
- 18 11 07 pygame 继续使用
---恢复内容开始--- 1 给原来的游戏不定时 增加一些敌机 用到了pygame的定时器 定时器就是每隔一段时间 就进行一次相同的操作 2 pyagame 在捕获键盘操作有两种 1 ...
- 吴裕雄--天生自然MySQL学习笔记:MySQL简介
MySQL 是最流行的关系型数据库管理系统,在 WEB 应用方面 MySQL 是最好的 RDBMS(Relational Database Management System:关系数据库管理系统)应用 ...
- PAT Advanced 1015 Reversible Primes (20) [素数]
题目 A reversible prime in any number system is a prime whose "reverse" in that number syste ...
- scrapy补充-分布式爬虫
spiders 介绍:在项目中是创建爬虫程序的py文件 #1.Spiders是由一系列类(定义了一个网址或一组网址将被爬取)组成,具体包括如何执行爬取任务并且如何从页面中提取结构化的数据. #2.换句 ...
- fscanf的用法
fscanf用于读取字符串数据流,遇到空白字符(空格' '; 制表符'\t'; 新行符'\n')就停止,若要读取完整的一行数据,可以使用格式控制("%[^\n]%*c"),或者使用 ...
- Ubuntu16装Flash
第一种方法: 1)下载flash的tar.gz压缩包.(以·tar.gz为后缀的文件是一种压缩文件,在Linux和macOS下常见,Linux和macOS都可以直接解压使用这种压缩文件) https: ...
- Linux分区挂载
Liunx采用树形的文件管理系统,也就是在Linux系统中,可以说已经没有分区的概念了.分区在Linux和其他设备一样都只是一个文件.要使用一个分区必须把它加载到文件系统中.这可能难于理解,继续往下看 ...