移动端input框被虚拟键盘挡住的js解决方法

时间: 2018-06-12阅读: 4802标签: 键盘

在webapp开发过程中,当用户切换输入法额时候,会出现输入框被弹起的虚拟键盘遮挡住的情况,这时用户输入只能盲填 ,这会验证影响用户体验。首先看下设计图:


实现上述布局,请参考文章:移动端H5固定底部导航菜单的三种布局实现


js的实现:

<script>
function fn(){
   var stop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
    var dom=document.getElementById('ipt');//获取input元素
    dom.onfocus=function(){
    	var interval = setInterval(function(){
           document.body.scrollTop = document.body.scrollHeight;
        },100);
    }
    dom.onblur=function(){
    	clearInterval(interval);//清除计时器
    	document.body.scrollTop = stop;//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
    } 				
},	
</script>

需要在页面加载完成后调用该方法。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/875

关闭

js键盘事件以及键盘事件拦截

onkeydown: 按下键盘时触发;onkeypress: 按下有值的键时触发,注意: onkeypress按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发对于有值的键,按下时先触发 keydown 事件,再触发这个事件

vue中监听返回键

在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿;利用 H5的 pushstate(个人理解为增加页面栈)特性与onpopup事件

关于ios的光标和键盘回弹问题

最近再做项目的时候(移动端),遇到了两个小问题,一个是ios端键盘不回弹的问题(微信浏览器),另一个是ios输入光标位置问题。就是点击一个按钮,要把输入框里面原来的内容加上一些固定的内容,然后一起输出到输入框。

可能这些是你想要的H5软键盘兼容方案

最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。从实验过一些机型上看,发现主要存在以下问题:

vue 自定义 键盘监听事件

vue 自己的键盘监听事件 需要有焦点才能使用,比如input button等 如果我们想在整个页面使用的话 可以使用js原生的监听事件

vue 键盘操作事件

当按键盘enter键和键盘左右键时,左右切换页面卡片并读取卡片上的信息,Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 event.which

为什么程序员使用电脑时,很少使用鼠标,只需要键盘就能工作?

现在很多人在使用电脑的时候会特别依赖鼠标,因为使用鼠标操作会比较方便,身边有程序员的人可能会疑惑为什么他们在使用电脑的时候,不需要鼠标,只需要一个键盘就能工作了呢?

微信小程序仿input组件、虚拟键盘

仿照微信支付界面,金额输入框不能用input;要有光标,点击输入框调起虚拟键盘,点击输入框以外的地方隐藏输入框;第一个输入的是小数点要补全,比如:第一个输入的是小数点,则输入框显示为 0. ;

解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失

移动端调起软键盘导致 position:fixed 偏移

app内打开H5页面,页面包含input输入框,点击input调起软键盘,输入完成点击下方提交按钮弹出toast时,会出现t toast 跳动的现象;关于 position: fixed首先来看,MDN 中对 position: fixed 的说明:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!