h5键盘遮挡输入框

刺骨的言语ヽ痛彻心扉 2022-06-17 13:52 270阅读 0赞

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