移动端h5 input输入框随小键盘上滑

移动端h5开发时，底部的输入框获得焦点有时不会随小键盘弹出上滑，用户需要自己手动滑动页面才能看到输入的内容。

解决：使用 Element.scrollIntoView()

1.Element.scrollIntoView() 介绍

element.scrollIntoView()，参数有两种，一种时传入true/false，另一种时对象形式
1. element.scrollIntoView(alignToTop); // Boolean型参数
2. element.scrollIntoView(scrollIntoViewOptions); // Object型参数

1.1 参数

1.1.1 alignToTop（boolean型参数）

• 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。

• 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

1.1.2 scrollIntoViewOptions（object型参数）

• behavior 可选
  定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。

• block 可选
  定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。

• inline 可选
  定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

1.2 实例

//页面上aa为input输入框id
let el = document.getElementById('aa')
el.scrollIntoView(false); //此时输入框在小键盘上方
el.scrollIntoView(true); //此时输入框在屏幕最上方

 //此时输入框在小键盘顶部和屏幕最上方的可视区域的中间位置
el.scrollIntoView({block: center, behavior: smooth});

2. 实现代码：

// antd mobile的TextareaItem，onFocus时触发定位
<TextareaItem
    count={25}
    autoHeight
    onFocus = {this.handleFocus.bind(this)}
/>

// handleFocus函数
handleFocus() {
    let e: any = event.srcElement;
    setTimeout(() => {
        e.scrollIntoView({
            block: 'center',
            behavior: 'smooth'
        });
    }, 300);
}