[移动开发]记录一下关于移动端H5输入框的问题

记录一下关于移动端H5输入框的问题

之前项目中开发了一个在线聊天的功能，当时急于赶着上线所有功能做的比较粗糙包括用户体验，最近在优化用户体验的时候发现了输入框的问题于是想着记录下来（项目壳子使用的是cordova）：

1. 安卓和IOS点击发送后键盘收起问题。
2. IOS软键盘弹起后页面顶上去的问题。

点击发送软键盘收起问题

每次点击红框中的发送后因为失去焦点软键盘都会被收起。

解决方法：

只需要阻止***发送按钮的默认事件***即可：

e.preventDefault();

*注意如果项目中使用了tap点击事件则没有效果需要将点击事件改为touchstart（touchend没有试应该是可以的）

IOS软键盘弹起页面顶上去的问题

上图可以看到顶部的导航栏被顶上去了

上图导航栏没有被顶上去

解决方法：

1. 安装插件 cordova plugin add cordova-plugin-keyboard
2. 在config.xml中加上2个配置：

<preference name="KeyboardShrinksView" value="true" />
<preference name="DisableScrollingWhenKeyboardShrinksView" value="true" />

第一个配置就是：键盘弹出时收缩webview（类似安卓下的行为）
第二个配置就是：禁止iOS默认键盘弹出时的界面上移行为