JS解决移动web开发手机输入框弹出的问题


Posted in Javascript onMarch 31, 2017

在移动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就会执行,我们先获取原来的高度,当发生变化时我们获取现在的页面高度,当页面高度不一样的时候就隐藏元素,

以上所述是小编给大家介绍的JS解决移动web开发手机输入框弹出的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 #Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 #Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 #Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 #Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 #Javascript
vue分类筛选filter方法简单实例
Mar 30 #Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 #Javascript
You might like
数据库的日期格式转换
2006/10/09 PHP
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
Python中模块与包有相同名字的处理方法
2017/05/05 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python字典排序的方法
2019/10/12 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
个人作风建设心得体会
2014/10/22 职场文书
新郎新娘答谢词
2015/01/04 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript