Hybrid 原生控件体验优化
作者：国风
一、背景
h5在移动时代占据着不可替代的位置，快速更新，跨平台，体验一致，但是也有不可逾越的问题，那就是输入。输入主要存在如下问题：
-
H5无法自动唤起键盘
-
H5无法指定特定场景需要的键盘
- 身份证
- 纯数字
- 数字密码键盘
- 带小数点的数字键盘
- 受设备影响大
- 同一类型键盘在不同操作系统手机中表现不一致
-
H5模拟键盘体验差
系统目前值提供三种类型的键盘：普通文字键盘、数字键盘（多了一行数字，输入不方便），电话键盘（无符号）
 |
 |
 |
|---|---|---|
| 文字键盘 | 数字键盘 | 电话键盘 |
无论是 iOS,还是 Android，h5只能用默认的键盘，很多特殊场景下仍然是普通键盘。类比下移动客户端定制的键盘，比如输入身份证（带 X），数字键盘（多个0的按钮），或者密码键盘，体验是非常好。这些特性能不能为 h5服务呢？答案是肯定的，本文接下来将介绍如何将原生定制键盘暴露给 H5无缝使用。
二、设计方案
2.1 总体方案
分为三个角色，用户、native和js(如下图)；
用户操作的时候，js阻止系统弹起默认键盘，然后收集h5输入框的一些信息，包括位置、大小、样式（具体哪些信息咱们在商量）；
Js将这些信息传递给native，native根据JS提供的信息，在webview之上生成新的view，新的view包含一个输入框和键盘，
提供给用户输入；
用户输入完成后（native不太懂，应该会触发类似于失去焦点的事件），native告诉js用户输入完毕，js将用户输入的信息再传递给用户
2.2 界面展示方案
从宏观上看，就是下面一层webview，上面一层是native的view，
如下为 native 计算控件位置和滑动距离的方式：
2.3通信设计
这里建议使用 JsBridge,github 上有开源，加入如下两个通信接口：
一个methodname是 showKeyboard，并接收JS传递的输入框信息；
一个methodname是hideKeyboard，为js告诉native主动隐藏键盘和输入框（即销毁native-view）；
Native 的输入事件通过固定回调，传递给 h5。
三、H5使用
我们的愿景目的是，场景方在使用中0副作用，做到真正的渐进增强；所以需要 h5对事件进行二次封装，由于这一块并不是我实现的，所以本文暂时不介绍，有兴趣的同学可以单独找我沟通。
这里只简单介绍下使用方式：场景方仅需在相关代码上添加一行代码即可，在可以使用廊桥安全键盘的版本下会自动使用安全键盘，否则使用场景方默认逻辑，可以做到0侵入；
对于业务方来说，是0成本的；d
总结
本文介绍了一种使用原生控件来改善 h5的输入体验，类似微信和支付包小程序。当然后续可扩展的方式很多，比如图片控件，列表控件，或者各种动画，自定义控件等，最终是向着 ReactNative 方向的一个兼容方案。
