转自 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. [GXYCTF2019]禁止套娃

    0x00 知识点 无参数RCE eval($_GET['exp']); 参考链接: https://skysec.top/2019/03/29/PHP-Parametric-Function-RCE/ ...

  2. python----linux下简单的排序

    1.选择排序:把一个数与余下所有的数排序,最小的排到最前面 [root@besttest liyn_test]# cat test.py #! /usr/bin/python a=[,,,] ,len ...

  3. Ubuntu Hadoop使用过程中的一些技巧1

    权限不足:打开有管理员权限的文件夹:sudo nautilus  输入密码即可进入最高权限的文件管理界面可以快速对文件进行修改删除操作 修改权限:chmod命令     chmod -R 777 文件 ...

  4. 《Java核心技术卷I》观赏指南

    Tomxin7 如果你有想看书的计划,但是还在纠结哪些书值得看,可以简单看看"观赏指南"系列,本文会简单列出书中内容,给还没有买书的朋友提供一个参考. 前言 秋招过去很久了,虽然在 ...

  5. 浅copy

    person=['aaa',['a',bbb'] p1=copy.copy(person) p2=person[:] p3=list(person) p4=person.copy() print(ty ...

  6. 201771010123汪慧和《面向对象程序设计Java》第十一周实验总结

    一.理论部分 1.栈 (1)栈是一种特殊的线性表,是一种后进先出的结构.(2)栈是限定仅在表尾进行插入和删除运算的线性表,表尾称为栈顶,表头称为栈底.(3)栈的物理存储可以用顺序存储结构,也可以用链式 ...

  7. Maven--mirror 和 repository

    参考:http://blog.csdn.net/isea533/article/details/22437511   http://www.cnblogs.com/xdouby/p/6502925.h ...

  8. ubuntu19.10安装cuda-10.1

    ubuntu19.10安装cuda-10.1 1.安装N卡驱动: 打开ubuntu的软件和更新,设置N卡驱动 2.查看ubuntu显卡驱动 nvidia-smi 显示: Sun Feb 23 06:4 ...

  9. ccf201403-3 记录一个神tmwa了的代码 莫非我没看懂题。。。

    #include <string.h> #include<cstdio> #include<stdio.h> #include <iostream> # ...

  10. tensorflow deeplabv3 训练自己的数据集

    https://blog.csdn.net/malvas/article/details/90776327