JS解决移动web开发手机输入框弹出的问题
在移动web开发中和pc端不同的是,手机的输入是软键盘,这样就会有个问题,那就是当有输入的时候,键盘弹起来,整个页面难免会发生变化
1、页面提高背景会出现不够用的现象,
解决方法,在body中设置背景图,即便是页面抬升了,背景也依旧存在,
2、底部用fix布局
这个问题会使得页面提升而底部的fix也跟着提升,遮盖住相应的页面,这个有两种解决方法
一、是页面页相应的提高,页面变化多少我们让上面的页面滚动多少,
$('input').bind('click',function(e){ var $this = $(this); e.preventDefault(); setTimeout(function(){ $(window).scrollTop($this.offset().top - 10); },200) })
$this.offset().top 是input 元素的高度,将window滚动到要输入的input的位置
二、把fix元素隐藏掉当页面输入完成再展示出来
var original = document.documentElement.clientHeight; window.addEventListener("resize", function() { var resizeHeight = document.documentElement.clientHeight; if(resizeHeight != original) { $('.bottom-button').css('display', 'none'); } else { $('.bottom-button').css('display', 'block'); } });
利用resize属性,当手机输入框弹出时,页面屏幕会变形,resize就会执行,我们先获取原来的高度,当发生变化时我们获取现在的页面高度,当页面高度不一样的时候就隐藏元素。
原文链接:http://blog.csdn.net/zhy421202048/article/details/68490568
(资源库 www.zyku.net)
您可能感兴趣的文章
- 06-26highlightjs网页代码高亮插件调用方法
- 05-10JS - 获取文件后缀,判断文件类型(比如是否为图片格式)
- 05-10js中!和!!的区别与用法
- 05-10js实现文章目录索引导航(table of content)
- 05-10JS实现单张或多张图片持续无缝滚动的示例代码
- 05-10js根据后缀判断文件文件类型的代码
- 05-10JS端基于download.js实现图片、视频时直接下载而不是
- 04-02CentOS安装Nodejs教程
- 02-11JS操作剪贴板代码详解
- 01-04帝国CMS页面JS调用登录状态loginjs.php中获取会员头像
- 11-05marginnote翻译功能使用方法介绍
- 01-14扫描全能翻译王-扫描全能翻译王应用软
- 04-28opporeno5快速返回使用方法
- 02-18一加9pro开启LHDC流式传输教程
- 11-05微博如何查询群聊历史记录
- 01-12馨睿相伴-馨睿相伴应用软件功能介绍
- 03-24小米11关闭手机分身操作方法
- 12-29安全扫描王pro-安全扫描王pro应用软件
- 01-11万漫小说-万漫小说应用软件功能介绍
- 11-04华为手表怎么添加音乐
最近更新
阅读排行
猜你喜欢
- 03-25小米手环5绑定手机教程
- 09-23safari扩展添加步骤分享
- 08-15米游社怎么添加好友
- 01-12中公教师-中公教师应用软件功能介绍
- 09-26小爱音箱app如何进行联网
- 11-20vivoX70pro+耳机返听功能在哪
- 07-07ubuntu下rz/sz命令的安装与使用说明
- 07-05Linux mshowfat命令
- 04-13小米11ultra恢复出厂设置教程
- 03-10帝国cms全站去版权的方法