移动端H5，输入框，软键盘 及 滚动

1. 软键盘弹起时，输入框在IOS上有部分被软键盘遮挡

处理方法，监听软键盘弹起，即监听input 的focus，当键盘弹起时，第一种方法是在input下面加一个增高层，第二种是强制将外层的滚动条拉至最下

2. 在页面没有按钮组件的时候，如何利用软键盘上的“完成”按钮进行发送

处理方法, 在input外加一层form，监听form的submit事件，监听的回调函数中处理发送请求

    

// 代码为vue写法，.prevent可以阻止submit事件的默认行为，其它框架或原生JS中  需要  pushcomment(data, event) { event.preventDefault(); }

// 软键盘发送按键的文字似乎无法靠JS改变，需要修改原生代码调整，不在此讨论范围内

3. 页面上的元素如何 唤起/关闭 软键盘

处理方法，当输入框(input) focus和blur时可以唤起和关闭软键盘，所以，当用户点击页面其它元素时候，我们可以通过调整input的focus 和 blur 来调整软键盘的 弹出和收起。

   

openKeyboard() {  document.querySelector('#st').focus();  }  // 触发focus，弹起软键盘

pushcomment(data) { 

    ...........

    document.querySelector('#st').blur();   // 发送完成后触发blur，关闭软键盘  

}

4. H5上达到原生的滚动效果

处理方法， 对需要滚动的组件使用CSS属性

.scrollPart {

    -webkit-overflow-scrolling: touch;

}

加上这个属性后，滚动可达原生滚动效果

但这个属性会遇到一个问题，如果这个滚动元素的外层元素使用了fixed定位，这个滚动元素就会出现卡死情况 （在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug。），处理方法如下：

在webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar

   

XXXXXXX