# 点击验证码输入框拉起软键盘后需要切换到数字输入模式

## 问题现象

应用当前页面需要用户输入验证码，该验证码为纯数字。当用户点击页面上验证码输入框时，拉起软键盘的当前输入模式为字符，用户需要点击软键盘的切换按钮，将输入模式转换为数字才能输入相应的验证码。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/36/v3/1PNFuuWkR_aJ6v1g7_v5iA/zh-cn_image_0000002658918121.png?HW-CC-KV=V1&HW-CC-Date=20261030T080643Z&HW-CC-Expire=31536000000&HW-CC-Sign=2AE0FB0CC80A5554760374AFE6FB1F5F5DB37B09F9954C8766E24DFC9D2317ED "点击放大")

## 背景知识

* [文本输入 (TextInput/TextArea)](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-common-components-text-input)：TextInput、TextArea是输入框组件，用于响应用户输入，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。
* [设置输入框类型](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-common-components-text-input#设置输入框类型)：TextInput有以下类型可选择：Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式、USER_NAME用户名输入模式、NEW_PASSWORD新密码输入模式、NUMBER_PASSWORD纯数字密码输入模式、NUMBER_DECIMAL带小数点的数字输入模式、带URL的输入模式。通过type属性进行设置。
* [Web组件对接软键盘](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-docking-softkeyboard)：开发者能够通过Web组件对接软键盘，来处理系统软键盘的显示与交互问题，同时实现软键盘的自定义功能。

## 问题定位

使用DevEco Testing工具查看页面的元素组成：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/52/v3/-oE1DzXAQ0SwlBWcINkabg/zh-cn_image_0000002628398908.png?HW-CC-KV=V1&HW-CC-Date=20261030T080643Z&HW-CC-Expire=31536000000&HW-CC-Sign=7F3BCF1A80D9BBA6F8A7A4657796FDE17F7B919B2578C7D6237F2A5F3F87DF8D "点击放大")

发现此处为TextInput组件，用于接收输入的验证码。

进一步查看代码，该TextInput组件的属性设置：TextInput().width('70%')，此处该TextInput组件未设置type，即输入框类型。

或者有如下的代码信息：TextInput().width('70%').type(InputType.Normal)，此处该TextInput组件将type属性设置为InputType.Normal，即输入框类型为基本输入模式。

## 分析结论

ArkUI页面中的TextInput组件未设置type属性，或者将type属性设置为InputType.Normal。

## 修改建议

设置TextInput组件的type属性为Number，即纯数字输入模式。

完整的示例代码：

```ts
// 输入框类型示例

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
  build() {
    Column() {
      Column(){
        Text('验证码：9987').width('30%');
        TextInput().width('70%').type(InputType.Normal)
        Text('验证码：9987').width('30%');
        TextInput().width('70%').type(InputType.Number)
      }
      .height('100%')
      .width('100%')
    }
    .borderStyle(BorderStyle.Solid).borderWidth(5).borderColor('#F1F3F5')
  }
}
```