h5键盘遮挡输入框

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): 滚动后的元素下边框与浏览器顶部对齐