标签：The   位置   元素   into   strong   type   http   develop   含义   

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

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

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

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

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

解决的方法：Element.scrollIntoView()

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

参数

<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>

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

标签：The   位置   元素   into   strong   type   http   develop   含义   

原文地址：https://www.cnblogs.com/Rembang/p/13155000.html