移动端手机软键盘遮挡输入框问题

页面:

<section class="links"><h3 class="title">联系方式</h3><div class="content"><input autocomplete="autocomplete" type="text" name="link" placeholder="QQ、邮箱或手机等联系方式" v-model="userlink" @click.stop="linksInputEvent"/></div></section>

js:

linksInputEvent: function () {  //联系方式输入和聚焦事件,解决手机虚拟键盘遮挡输入框问题var self = this;var timer = setTimeout(function () {var pannel = document.querySelector('.links .content input');pannel.scrollIntoView(true);pannel.scrollIntoViewIfNeeded();clearTimeout(timer);timer = null;}, 200);}

主要是三行代码：

var pannel = document.querySelector('.links .content input');pannel.scrollIntoView(true);pannel.scrollIntoViewIfNeeded();

获取输入框的dom对象以及添加这两个滚动事件
加入延时是因为软键盘出现需要时间。
另一种是通过输入框的focus和blur事件完成，当触发focus事件时，

input{position: fixed;top: 50px;
}

当触发blur事件时，改变或删除position和top的值即可。

移动端手机软键盘遮挡输入框问题相关推荐

Activity在全屏属性情况下，WebView会出现输入法软键盘遮挡输入框（界面无法自动上调）问题
转自:http://www.rcdio.com/js/mg/xy/47922.html 正常情况下 ,设置了该属性之后,软键盘在弹出时,输入框便不会被遮挡. 但是该属性在有些情况下是不生效的,目前我所 ...
android 控件遮盖,Android手机软键盘遮挡布局控件
在Activity中的布局的下方有EditText获取焦点弹出软键盘的时候,如果不作处理,软键盘可能会遮挡输入框或者一些按键,这样的用户体验比较差. 这里整理了几种处理方式,可以使页面整体上移.并且提 ...
完美解决手机软键盘遮挡问题
遇到的问题同事的项目在做登陆的时候遇到个问题,就是弹出软键盘把按钮遮挡了.网上好多方法试了一遍效果都不好. 那么我们该如何解决这个问题呢? 解决思路弄个scrollview,让软键盘把scrol ...
js手机键盘遮挡_iphone手机微信页面软键盘遮挡input输入框解决方法
现象描述:iphone手机微信页面,用position: fixed;定位的input或textarea输入框,在获取输入焦点时,会被弹出的输入法软键盘遮挡,导致用户无法看到输入框,效果如图: 简化测 ...
android h5输入框被键盘遮挡,h5软键盘挡住输入框问题解决（android）
问题如图一个表单: 在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题,ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法的too ...
WebView输入框软键盘遮挡问题（沉浸状态栏和adjustResize的冲突）
[WebView为什么没有在软键盘弹出时更新布局] 默认Activity情况下,软键盘弹出时,通过给DecorView的LinearLayout添加"layout_margin_bottom ...
android自定义键盘遮挡,Android软键盘遮挡的四种完美解决方案
一.问题概述在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时 ...
android 键盘遮挡,Android软键盘遮挡的四种解决方案
在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时输入框被系统键 ...
android EditText光标位置，光标样式，EditText限制输入内容，软键盘遮挡的EditText，搜索框，限制输入表情
显示在软键盘上 android:windowSoftInputMode="adjustPan|stateHidden" 1.光标位置 homesosoedit.setSelecti ...

移动端手机软键盘遮挡输入框问题

移动端手机软键盘遮挡输入框问题相关推荐

最新文章

热门文章