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就会执行,我们先获取原来的高度,当发生变化时我们获取现在的页面高度,当页面高度不一样的时候就隐藏元素,
以上所述是小编给大家介绍的JS解决移动web开发手机输入框弹出的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
JS验证input输入框(字母,数字,符号,中文)
只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文 <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="r
-
js监听input输入框值的实时变化实例
1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo
-
JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数
第一: 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 如果不是整数就直接alert 第二: 限制是两位的小数 <input type = "text" name= "price&quo
-
Js制作点击输入框时默认文字消失的效果
为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢?从用户体验的角度出发,简化用户使用步骤,让用户用得更方便就是提高了易用性,例如当鼠标悬浮在输入框时改变输入框颜色.自动选中输入框中的默认文字,或者点击输入框时自动清除默认内容等等. 这个效果听起来复杂,其实做起来却很简单,只要一小段javascript代码即可解决.下?面介绍一下几种效果的代码: 1.点击输入框选中内容的Html代码: <form id="form1"
-
JavaScript仿支付宝6位数字密码输入框
前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <input type="tel" maxlength="6" class="ipt-real-nick"/> <div c
-
JS实现身份证输入框的输入效果
实现如图所示的输入效果: 实现这种效果,比较简单的一种方式就是给一个input添加一个背景图片,然后通过设置字间距来达到效果. 代码: html: <input type="text" maxlength="8" class="idInput" onkeyup='this.value=this.value.replace(/\D/gi,"")'> css: .idInput{ width: 24.95rem; he
-
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
本文实例讲述了JavaScript控制输入框中只能输入中文.数字和英文的方法.分享给大家供大家参考,具体如下: 1.问题背景: 遇到这样一个问题:有一个输入框,要求只能输入中文.数字和英文(即过滤特殊字符串) 2.JS代码: function checkUsername() { //正则表达式 var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$"); //获取输入框中的值 var username = document.getElemen
-
JS获得多个同name 的input输入框的值的实现方法
先看下基于JS代码实现input密码输入框输入密码变黑点密文.具体代码如下所示: html代码 <form id="login-form" method="post" onsubmit="return checkForm()"> 输入密码<input type="password" id="input-password"> <input type="hidden&qu
-
js格式化输入框内金额、银行卡号
我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式:输入框内格式化和输入框外格式化.这里我主要把我在项目中遇到的输入框内部格式化的,代码亮出来,框外的格式化相对简单一点. 页面代码: <div class="wrap"> <input type="text" id="bankCard" placeholder="输入银行卡号"> </div> <div cl
-
JS解决移动web开发手机输入框弹出的问题
在移动web开发中和pc端不同的是,手机的输入是软键盘,这样就会有个问题,那就是当有输入的时候,键盘弹起来,整个页面难免会发生变化 1.页面提高背景会出现不够用的现象, 解决方法,在body中设置背景图,即便是页面抬升了,背景也依旧存在, 2.底部用fix布局 这个问题会使得页面提升而底部的fix也跟着提升,遮盖住相应的页面,这个有两种解决方法 一.是页面页相应的提高,页面变化多少我们让上面的页面滚动多少, $('input').bind('click',function(e){ var $th
-
JS+CSS实现实用的单击输入框弹出选择框的方法
本文实例讲述了JS+CSS实现实用的单击输入框弹出选择框的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
-
JS实现单击输入框弹出选择框效果完整实例
本文实例讲述了JS实现单击输入框弹出选择框效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
-
jQuery实现手机自定义弹出输入框
手机涉及到填写表单时,需要手机弹出自定义的输入框,而非手机自带的输入键盘,如大写数字等. 实现思路(考虑多种文本输入形式): 首先,文本框获取焦点时禁止手机弹出自带的输入键盘. // 禁用手机自带的键盘输入框 function forbidFocus(i){ $('#txt'+i).focus(function(){ document.activeElement.blur(); }); } 其次,显示与关闭自定义的输入键盘. // 打开自定义输入键盘 function showDialog(i)
-
js中confirm实现执行操作前弹出确认框的方法
本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在删除或其它操作前弹出确定提示,我们有很多方法,最基本的就是利用js自带的函数confirm来操作了 最简单的用法如下: 鼠标事件使用confirm 复制代码 代码如下: <a href="#" onclick= "if(confirm( '是否确定! ')==false)return false; ">点击确定</a> 想简单
-
js实现鼠标移到链接文字弹出一个提示层的方法
本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法.分享给大家供大家参考.具体分析如下: 这里实现鼠标移动到链接文字上面,弹出一个已定义好的DIV层的效果.在这个层里你可以加入与此链接对应的信息,这样就成了一个信息提示窗,在淘宝.新浪都能看到这种效果,很实用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
JS点击某个图标或按钮弹出文件选择框的实现代码
下面一段代码是基于js实现的点击某个图标或按钮弹出文件选择框的核心代码,代码比较简单,需要的朋友参考下 具体代码如下所示: <HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2.min.js"></script> <script type='text/javascript'> function selectFile(){
-
JS实现从网页顶部掉下弹出层效果的方法
本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法.分享给大家供大家参考.具体如下: 这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,喜欢的用时候息动手美化下,觉得不错. 运行效果如下图所示: 具体代码如下: <HTML><HEAD><TITLE>窗口从上掉下来</TITLE> </HEAD> <BODY bgColor=#fef4d9
-
JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="commodity_a
-
JS实现的仿QQ空间图片弹出效果代码
本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: <script type="text/javascript"> function imageShow(which_click) { var image_path = which_click; //alert(image_path); var tag_top = Math.max(document.documentElement.scrollTop, document.body.scroll
随机推荐
- Git使用基础篇(一些常用命令和原理)
- 输入mdb数据库即可将打包的mdb文件解包
- js判断一个字符串是否包含一个子串的方法
- oracle中文乱码解决的办法
- js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
- cookie的优化与购物车实例
- 浅谈php中curl、fsockopen的应用
- 浅谈php和js中json的编码和解码
- php简单实现多语言切换的方法
- C/C++ 编译器优化介绍
- MySQL笔记之视图的使用详解
- 悄悄用脚本检查你访问过哪些网站的代码
- ubuntu制作本地源的实现方法
- 微信小程序 聊天室简单实现
- shell脚本实现拷贝大文件显示百分比的代码分享
- Linux守护进程的启动方法
- 利用脚本自动安装SQLServer的实现步骤分析
- 第六章之辅组类与响应式工具
- Android应用中加入微信分享简单方法
- PHP5/ZendEngine2的改进