HarmonyOS鸿蒙Next中web组件适配H5中的输入框

HarmonyOS鸿蒙Next中web组件适配H5中的输入框 场景

将H5中input标签的type属性设置为文本类型时，会在移动端拉起软键盘。由于设备和UI布局的差异，可分为三类软键盘适配场景：

1、当web组件拉起软键盘后的布局问题。

2、input标签的输入框获焦和失焦是否弹出和隐藏问题。

3、input标签的type属性不同拉起不同的软键盘适配。

网页拉起的软键盘适配当前页面布局

web组件加载的H5拉起的键盘对H5页面的避让模式可以通过keyboardAvoidMode属性来进行设置，总共分为三种避让模式：

1、页面被顶起或未被顶起：

效果展示：分别为三种属性的实际效果

2、需要页面在软键盘上面避让一段距离：

方案实现：通过监听软键盘是否弹出，来动态设置一个放置在web组件下面的blank组件的高度，将web页面顶上去一段距离，达到以下效果

示例代码如下：

3、自定义弹窗中的web页面拉起软键盘的避让情况：

在此场景下，H5页面拉起的软键盘会将整个弹窗都顶起来，但是当弹窗内的web组件使用了web的自适应高度能力，即加上了.layoutMode(WebLayoutMode.FIT_CONTENT)属性后，会导致弹窗显示异常，这是因为目前这个属性并未做避让弹窗的处理。目前使用的规避方案就是通过获取当前页面的高度来给web页面动态设置，来替代原来的自适应高度的方法。

网页上输入框失焦获焦问题

1、获焦后未自动弹出软键盘：

目前web的规格是输入框自动获焦后不会拉起软键盘，可使用输入法框架的showTextInput方法拉起软键盘，代码如下：

2、点击软键盘右下角“完成”键后输入框未失焦，键盘未收起：

目前可以通过runJavascript方法加载一段js使输入框失焦，示例代码如下：

这段js的作用就是监听软键盘右下角的回车键，即显示为“完成”或者“开始”的那个按键，当js监听到它按下后调用失焦方法收起软键盘。

H5上input标签的不同type属性与拉起不同类型键盘的适配

网页输入框拉起不同类型的软键盘与input标签的两个属性有关系，分别是type属性和inputmode属性，这两个属性单独使用以及一起使用拉起什么类型软键盘的关系如下：

可以根据以上表格两个属性的作用情况来根据业务需求拉起不同的软键盘，如果有特殊的业务场景，例如输入座机号，它需要输入一个“-”符。这种情况可以通过在应用侧执行一段js脚本到H5上，就可以实现“-”的提交以及限制其他字符的输入，H5示例代码如下：

以上代码中input标签拉起软键盘是数字键盘，不能限制其它字符的输入，并且在提交输入内容的时候由于type属性的限制导致提交失败。

目前的解决方案就是通过js方法把input的标签的type改为text类型，然后继续添加inputmode="numeric"属性，拉起数字键盘，最后使用一段正则限制其他字符输入只允许输入“-”字符，示例代码如下：