转自 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获取焦点时,键盘弹出,底部导航栏上升。的更多相关文章

  1. input获取焦点软键盘弹出影响定位

    解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题$(document).ready(function() {                                var ...

  2. 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

    场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...

  3. 小程序中点击input控件键盘弹出时placeholder文字上移

    最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...

  4. 移动端解决input focus后键盘弹出,高度被挤压的问题

    //解决弹出键盘页面高度变化bug var viewHeight = window.innerHeight; //获取可视区域高度 $("input").focus(functio ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):带有字体图标的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. iOS开发实用技巧—在手机浏览器头部弹出app应用下载提示

    iOS开发实用技巧—在手机浏览器头部弹出app应用下载提示 本文介绍其简单使用: 第一步:在本地建立一个访问的服务端.  打开本地终端,在本地新建一个文件夹,在该文件夹中存放测试的html页面.   ...

  7. 解决input获取焦点时底部菜单被顶上来问题

    <div class="search-box"> <input class="search-input" type="text&qu ...

  8. web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

    1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...

  9. mui底部导航栏切换分页

    使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...

随机推荐

  1. Elasticsearch分布式搜索

    ElasticSearch之介绍 一 Elasticsearch产生背景 1.1 大规模数据如何检索 如:当系统数据量上了10亿.100亿条的时候,我们在做系统架构的时候通常会从以下角度去考虑问题:1 ...

  2. [CISCN2019 总决赛 Day1 Web4]Laravel1

    0x00 知识点 这个题核心就是找POP链,看了一下网上的WP,难顶啊.. 先贴上思路和poc,之后等熟练了再来做吧 https://glotozz.github.io/2019/11/05/buuc ...

  3. 随机森林RF

    bagging 随机森林顾名思义,是用随机的方式建立一个森林,森林里面有很多的决策树组成,随机森林的每一棵决策树之间是没有关联的.在得到森林之后,当有一个新的输 入样本进入的时候,就让森林中的每一棵决 ...

  4. php对象:get_object_vars(), get_parent_class(),is_subclass_of(),interface_exists()

    get_object_vars():获得对象的属性,以关联数组形式返回 get_parent_class():获得对象的父类 is_subclass_of():判断对象是否某类(参数2)的子类实例出的 ...

  5. try{}catch{}finally{}使用总结

    import java.util.Scanner; class MyException extends Exception { public MyException(String Message) { ...

  6. nginx下第一次使用thinkphp5遇到的坑

    最近面试php很多都在问会不会tp5所以借机了解了一下,刚在本地搭建了个就遇到了问题. 这里总结一下: 问题1.tp5+nginx=500 internal server error 我用的是phps ...

  7. 基因调控网络 (Gene Regulatory Network) 01

    本文为入门级的基因调控网络文章,主要介绍一些基本概念及常见的GRN模型. 概念:基因调控网络 (Gene Regulatory Network, GRN),简称调控网络,指细胞内或一个基因组内基因和基 ...

  8. 使用pyintaller打包python3.6项目,并用c#调用该脚本

    一.pythoninstaller 打包python项目 前提:安装python3.6环境+pycharm 1. 安装pyinstaller pip install pyinstaller 2. cm ...

  9. 课程报名 | 5G时代的视频云服务关键技术与实践

    6月3日,工业和信息化部宣布将于近期发放5G商用牌照.这也意味着,中国正式进入了5G时代. 5G身上有很多新标签:"大规模天线"."新的编码技术"." ...

  10. SQL的技巧

    衍生特征时, 统计每个类目id的用户的购买次数.金额, 用了下面语法, 发现效率很低. select UID , sum(if(item_level1_id='1', order_cnt, 0)) s ...