移动端吸底输入框踩坑总结

任务

需要实现一个吸底输入框，具体需求为：
- 未点击时有一个单行输入框固定在页面底部
- 点击该输入框后，弹起键盘，该输入框隐藏，切换一个多行输入框
- 多行输入框紧贴键盘顶部，有遮罩，有“取消”和“发布”两个功能键
- 点击功能键后，切换到未点击时的初始状态

行动

难点&方案

1. 切换输入框时被键盘遮挡，或页面可以滚动导致输入框被滚动到键盘后方
   解决方案：设置body高度为 100%，并设置 overflow为 hidden

2. IOS端切换输入框无法正常聚焦唤起键盘
   解决方案：IOS需要设置input或textarea的 autofocus属性，并且初始状态的单行输入框必须是input元素，然后在初始元素的点击事件中对切换元素进行聚焦方法 focus()。
   对于部分网上提供的方法，因为浏览器版本更新大部分方法都已经失效，查阅了部分文章，目前的结论是IOS下 只有在监听了用户触发的事件的函数中执行focus才有效

3. 微信端输入完文字后点击无反应
   解决方案：微信浏览器的一个bug，用js滚动页面到底部，在input元素失去焦点时，页面仍然会处于一个滚动冻结的状态。当手动在页面有滑动动作的时候可恢复原状（页面会往下滚动），后续点击操作正常。该问题可以通过失去焦点时执行滚动一小段距离的代码修复这个问题
   javascript window.scrollTo(window.scrollLeft, 100); //设置y轴滚动一百像素,微信兼容

4. IOS端微信浏览器键盘弹出过程中，页面底部输入框可能出现多余空白
   解决方案：暂无有效解决方案，待后续处理，目前可以通过计算，精准滑动input框到底部（避免滑动超出页面高度）避免弹出键盘时出现空白（但是向上滚动任然会有空白部分出现）

5. 因为不同端不同浏览器，甚至浏览器版本不同，都可能造成以上问题或者其他问题，查阅了网上相关文章并无特别完美的兼容方案，只能针对现有测试机型和尽可能考虑兼容问题。

结果

1. 通过解决上述问题，基本实现了原需求效果，第4点问题仍然有几率复现但在不影响使用的情况下可以接受。等待后续更有方案。
2. 关于吸底输入框，另一个解决方案是设计时尽量避免这种布局，考虑例如弹层和吸顶输入框，可以避免一些兼容性问题