移动端中 H5输入框在d起键盘后被遮挡

可见，键盘遮盖住了这个输入框，而且此时不能滚动，而按钮的设计为始终置底

置底的按钮为fixed布局，观察得知，这样当键盘d起时，其实页面的高度被缩短成类似于这样

这样，始终置底的元素会遮盖住输入框，并且由于界面并没有长到可以滚动的地步，输入框非常正常地被遮住了

【解决办法】

首先，把置底元素设置成，在页面的底部而非屏幕的底部

然后，设置页面的高度，让按钮有置底的效果

注意有 最小高度 ，因为当键盘d起时，100vh是缩小的那部分的高度，而不是屏幕高度

*如果有大屏的需求，适配一下就好

这样，当键盘d起时，内容就是可以滚动的了，出于用户体验的需求，可以在focus输入框的时候，把滚动条划一下，露出输入框

具体的数值可以再调整

设置content为 overflow: auto

让content的高度为 100vh-buttonHeight

使用第二种的html

利用window.resize方法，这个方法的特性是：当调整浏览器窗口的大小时，发生 resize 事件。

screenHeightNoChange==true的时候使用方法三，当==false的时候，将button变成position:relative 就能解决问题了

以上，就是解决问题的方法了

解决方法

1、scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。

2、alignWithTop 若为 true，或者什么都不传，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。

3、alignWithTop 若为 false，调用元素会尽可能全部出现在视口中，可能的话，调用元素的底部会与视口顶部平齐，不过顶部不一定平齐。

4、该方法是唯一一个所有浏览器都支持的方法，类似还有如下方法，但是只有在Chrome和Safari有效。

5、代码如下：

6、再次测试，效果如下：

7、相比于input被挡住，突兀地出现在页面中间更加可以令人接受，但是多次测试，仍然存在问题：当切换输入法的时候，input框的位置会往下移动，被键盘挡住一部分，而且出现的概率比较高（中英文切换），效果如下：

8、当软键盘被唤起是，使用 scrollTop() 方法使input元素滚动到指定的位置，但是滚动的具体数值需要调试才能给出，所以这里就不再演示了。

---