使用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=" ...
随机推荐
- Linux简介和环境的搭建
Linux的学习方向 网络服务器 嵌入式程序开发 Linux的设计哲学:一切皆文件 常用命令:cd 切换目录sudo shutdown -h now 关机命令sudo reboot 重启sudo ro ...
- c++ 字母排序
char a[123] = {'Z', 's', 'p', 'l', 'j', 'r', 'q', 'v', 'n', 'm', 'C', 'F', 'D', 'B', 'A', '2', '0', ...
- JavaEE--JNDI(下,实现)
参考:https://blog.csdn.net/ouyida3/article/details/46699023 https://www.landui.com/help/show-6158.htm ...
- Java算法练习——两数之和
题目链接 题目描述 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利 ...
- SpringCloud学习之Config分布式配置中心(八)
统一配置中心概述 如果微服务架构中没有使用统一配置中心时,所存在的问题: 配置文件分散在各个项目里,不方便维护 配置内容安全与权限,实际开发中,开发人员是不知道线上环境的配置的 更新配置后,项目需要重 ...
- 瑞士军刀DLib的VS2015编译
Dlib的官方解释是: Dlib is a modern C++ toolkit containing machine learning algorithms and tools for creati ...
- windows server 2012 ftp搭建
1.安装IIS的时候勾选ftp 2.创建ftp站点,先检查21端口是否开放 一定要勾选身份认证,匿名去掉,不然一直登陆不了,也不提示 一直点下一步, 遇到的坑,第一个:出现“打开ftp服务器上的文件夹 ...
- 正则表达式模式修正符 比如/esi
正则表达式模式修正符 比如/esi 作者: 字体:[增加 减小] 类型:转载 下面列出了当前在 PCRE 中可能使用的修正符.括号中是这些修正符的内部 PCRE 名.修正符中的空格和换行被忽略,其它字 ...
- Vue-router(4)之路由跳转
路由传参 案例:现在需要展示一个电影列表页,点击每一部电影,会跳转到该部电影详情页(跳转时携带type和id) 代码实现(未携带type): index.js import Vue from 'vue ...
- Linux-IO多路复用select函数实践
#include <stdio.h> #include <unistd.h> #include <string.h> #include <sys/time.h ...