1. h5嵌入到原生时,输入框获取焦点会调起键盘, 如果不作处理键盘有可能会遮挡住输入框。
不引入插件前提下的解决方案大多是这两种:scrollintoviewifneeded() 和 scrollintoview() 。 我这次用的是scrollintoview方法
js代码
$(function(){
// 让当前对象滚动到顶部
$("#name").click(function(){
setTimeout(function(){
document.getElementById("name").scrollintoview();// 参数可以是true, false, 空参数
}, 300);
});
// 让当前对象上面的元素滚动到顶部,使当前对象处于比较中间的位置
$("#age").click(function(){
setTimeout(function(){
document.getElementById("name").scrollintoview(); // 参数可以是true, false, 空参数
}, 300);
});
});
html代码
name: <input type="" style="height: 50px; background-color: yellow" id="name" name="name"> <br />
age: <input type="" style="height: 50px; background-color: yellow" id="age" name="name"> <br />
为什么要使用click事件:
使用focus事件的问题:
a. 点击输入框-->调起键盘--->页面往上滚动--> 此时是正常的
b. 点击安卓物理返回键--->页面掉下来-->再点击输入框--->调起键盘-->页面不滚动
使用focus事件, 点击返回物理返回按钮时,输入框依旧处于聚焦状态,所以再次点击输入框时,页面不会滚动。
为什么使用定时器:
首先要明白, 滚动的时机(也就是scrollintoview的执行时机), 当元素不能在可视区域显示时才会滚动。 手机调起键盘需要时间, 如果不延迟,页面滚动代码可能会在键盘遮挡输入框前调用, 而调用滚动代码时,输入框还处于可视区域,所以页面不会滚动。 延迟时间可以自定义。
为什么不使用jQuery获取要滚动的元素:
scrollintoview方法是h5的api, jQuery对象调用不到该方法。
scrollintoview的参数:
scrollintoview(true), scrollintoview():这两个方法的结果是一样的, 滚动后的元素上边框与浏览器顶部对齐
scrollintoview(false): 滚动后的元素下边框与浏览器顶部对齐