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

#### 问题现象

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2a/v3/xuuk6uKpRRS3qvuBbwy6hw/zh-cn_image_0000002658918121.png?HW-CC-KV=V1&HW-CC-Date=20260709T133922Z&HW-CC-Expire=86400&HW-CC-Sign=75F5E09CA28C1FD8F3DC669BC194D36D3324BD18DD7C6C436F5E3507519624A8 "点击放大")

#### 背景知识

*   [文本输入 (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/b2/v3/5iNHnIJASdSx0CcglOEMWQ/zh-cn_image_0000002628398908.png?HW-CC-KV=V1&HW-CC-Date=20260709T133922Z&HW-CC-Expire=86400&HW-CC-Sign=C0B341BCE09255A332EC20BB8718B0B015E7E021A8658067B72D3FD697B948BB "点击放大")

发现此处为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，即纯数字输入模式。

完整的示例代码：

_// 输入框类型示例_

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')
  }
}