微信小程序关于键盘行为的探索

模拟微信朋友圈评论功能，如图： 

 

首先考虑键盘将输入框顶起来，使得输入框正好在键盘上方

解决办法：fixed定位，将输入框定位在页面最下，键盘升起时会自动将输入框顶起来

于是有了这么一个demo：

 

有几个细节：

1.键盘右下角默认是”完成"按钮而非”提交“。可以通过设置input标签的属性 confirm-type="send" 来改变

2.键盘紧贴输入框，覆盖了输入框包裹层的下端。可以设置 cursor-spacing 来改变光标与键盘的距离

3.点击页面空白处和输入法的收起按钮时，输入框应该都会隐藏，这是个挺有意思的问题，看起来有点复杂，其实仅仅是输入框失焦事件而已

 

于是我们得到了一个相对完善的demo:

 

有一个严重的问题：<input>是单行输入框，而想要多行输入，必须要用<textarea>。那让我们看看标签替换成textarea表现如何：

 

 

键盘多了个足以逼死强迫症的表情和完成按钮，而且右下角是”换行“而非”提交“按钮。查询了一下api，发现对textarea标签而言，这些键盘默认行为无法改变。

所以标签换回input，那怎么做到多行输入呢？

这里做个猜想，输入框包裹层是一个<scroll-view>，在单行输入框输入到头时（监听输入并计算光标位置），再创建一个单行输入框，并将焦点给到这个输入框，这样就形成了多个单行输入框组成的多行输入框。最后点击提交时拼接所有输入框里的文本。

这种方法可不可行呢？我觉得可行，但是我又不想去做，没错，键盘侠就该这么自信。

以上是我关于微信小程序关于键盘行为的探索，因为自身水平有限，如果大家有错误或者有更好的方案，欢迎指正。