js定位输入位置于可视窗口
2017-07-14 本文已影响18人
ForsonLim
在开发webapp应用的时候,有些表单界面经常要输入内容,这是手机自动调用出来的输入法可能会挡住输入框,这是个很不好的体验。
这里我是这样来解决这个问题:
-
我们先要获取表单所有的输入
input[type='text']
,如果还有textarea
直接逗号加在后面就可以了。 -
之后获取点击的目标,记录下来
var target = this;
至于为什么要这样做,大家可以看有关于this
的介绍,或者看下面的代码就知道了。 -
最后就是关键了,调用
scrollIntoViewIfNeeded()
这个方法,从这个方法的意思将被需要的滚动至可视区
就可以很容易理解它的作用。
下面给出整体的代码:
$(document).on('click','input[type="text"]', function () {
var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
},400);
});
希望对大家有帮助!有更好的也可以留言说一下!