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 相关文章推荐
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
深入学习JavaScript对象
Oct 13 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
prototype class详解
2006/09/07 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
浅谈django 重载str 方法
2020/05/19 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
个人简历自荐信
2013/12/05 职场文书
英语自荐信范文
2013/12/11 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
学生安全责任书模板
2014/07/25 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
天那边观后感
2015/06/09 职场文书
婚宴主持词
2015/06/30 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
CPU不支持Windows11系统怎么办
2021/11/21 数码科技