关于点击input框唤醒键盘导致input被遮盖的问题

Posted 2020-12-11 rembang

关于点击input框唤醒键盘导致input被遮盖的问题

这个问题相信大家在实际开发过程当中都有遇见，我自己也遇见过很多次。之前在百度上看见大多数的方法利用的都是键盘唤醒了之后，页面的实际高度会发生变化。利用这个特点对页面进行一些变动，进而让页面滚动到input框露出。

但是在实际开发过程当中，我在MDN上发现了一个很好用的方法—— Element.scrollIntoView() ,这个方法就是让当前元素滚动到浏览器窗口的可视区域内不。这个应用场景非常符合我们这个目标需求。

下面来说一下这个方法的应用场景

• 大家可能都知道在ios端，点击输入框，我们不需要对这个聚集和失焦事件进行监听，他仍然可以在聚集的时候将内容顶上去，失焦的时候在把内容降下来。这是iOS的设计原理，iOS方面，我只知道他是视图优先的设计模式，大概含义就是cpu会把资源全都给正处在视图上的东西，但是唤醒时候内容被顶起的原理我不是特别了解。（具体是什么原理，我不是特别清楚，如果有对iOS特别了解的小伙伴可以评论给我，我其实挺好奇这一块内容的）
• 但是在安卓端有一些手机他们并不像iOS一样会自动将内容顶起和恢复，我们就需要自己添加聚焦和失焦事件，去手动的控制

解决的方法：Element.scrollIntoView()

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

参数

参数	属性值	描述
空	相当于 element.scrollIntoView(true)
布尔值	true	的话是元素的顶端将和其所在滚动区的可视区域的顶端对齐
	false	和底部对齐,对齐的情况还得看你的文档流
对象	{ behavior: 过渡效果 auto（默认值，没有过渡效果）smooth（有过渡效果 ）,
	block：垂直方向的对齐 start" （默认值）, "center", "end", 或 "nearest ，
	inline：水平方向的对齐 start", "center", "end", 或 "nearest（默认值）}

<div>
	<div>
    这上面呢 一般就是你自己的代码结构。
  </div>
	<div id=‘example__div‘>
    <input id=‘example__input‘ type="text"  />  这个输入框呢就可以理解成你的表单控件
  </div>
</div>

我们模拟的场景就是 input框的位置 是在一屏页面的中部或者下部，当我们点击输入框的时候键盘会唤醒，而我们的布局结构不回改变，结果导致输入框被遮遮挡。

这个时候我们就可以给input框添加聚焦事件
如果是原生js的话 就是添加一个focus事件 用jQuery也可以。
<script>
let node = document.getElementById(‘example__div‘)
//聚焦事件
document.getElementById(‘example__input‘).onfocus = funtion(){
//一般情况下我会选择将包裹input的父元素进行位置的变化  
node.scrollIntoView({
        block: "start",
        behavior: "smooth"
      })
}
//失焦事件
document.getElementById(‘example__input‘).onfocus = funtion(){
//一般情况下我会选择将包裹input的父元素进行位置的变化  
node.scrollIntoView({
        block: "end",
        behavior: "smooth"
      })
}
  
  
</script>