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

zhoutaifeng 2020-06-17

关于点击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>

相关推荐