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的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
Angular4学习教程之HTML属性绑定的方法
Jan 04 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
基于vue实现微博三方登录流程解析
Nov 04 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 select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
vue axios用法教程详解
2017/07/23 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
python爬虫容易学吗
2020/06/02 Python
python解释器安装教程的方法步骤
2020/07/02 Python
Python中Selenium库使用教程详解
2020/07/23 Python
python中selenium库的基本使用详解
2020/07/31 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
python re.match()用法相关示例
2021/01/27 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
后勤采购员岗位职责
2013/12/19 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS