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

#### 问题现象

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

#### 背景知识

*   文本输入 (TextInput/TextArea)：TextInput、TextArea是输入框组件，用于响应用户输入，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。
*   设置输入框类型：TextInput有以下类型可选择：Normal基本输入模式、Password密码输入模式、Email邮箱地址输入模式、Number纯数字输入模式、PhoneNumber电话号码输入模式、USER\_NAME用户名输入模式、NEW\_PASSWORD新密码输入模式、NUMBER\_PASSWORD纯数字密码输入模式、NUMBER\_DECIMAL带小数点的数字输入模式、带URL的输入模式。通过type属性进行设置。
*   Web组件对接软键盘：开发者能够通过Web组件对接软键盘，来处理系统软键盘的显示与交互问题，同时实现软键盘的自定义功能。

#### 问题定位

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

发现此处为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')
  }
}
```