如何针对不同场景弹出特定类型软键盘
=================

#### 问题现象

TextInput组件支持输入任意文字内容，某些场景下，为了提升用户体验并确保输入的准确性和效率，需要针对不同场景弹出特定类型的软键盘。如纯数字输入框仅需要弹出数字软键盘、电话号码输入框需要支持'-'，'#'、邮箱输入框需要键盘提示常用邮箱后缀等场景。

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/75/v3/wx6Uc856SFS15gVwPjyUrw/zh-cn_image_0000002659060257.png?HW-CC-KV=V1&HW-CC-Date=20260709T134001Z&HW-CC-Expire=86400&HW-CC-Sign=B2DD06938A0D3B6D421AD4A1FCC9A40E42E601DB0893E71D70161AFB2C5B9F49 "点击放大")

#### 背景知识

*   [TextInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput)：单行文本输入框组件。
*   [type](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#type)：可以通过设置[输入框类型](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#type)来指定特定类型键盘。
*   [InputType枚举值](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#inputtype枚举说明)：单行文本输入框类型，包括如密码输入模式、邮箱地址输入模式、纯数字输入模式等。
*   [customKeyboard](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#customkeyboard10)：设置自定义键盘。
*   [onChange](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#onchange)：输入内容发生变化时，触发该回调。

#### 解决方案

*   方案一：使用type属性，设置InputType枚举值。若需要限制长度或其他特殊限制，通过onChange方法对输入值做正则表达式匹配，见官网[TextInput限制输入](https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-883)。
*   当限制弹出的软键盘为数字键盘，且设置输入框类型为TextInput.NUMBER\_DECIMAL时，此时TextInput组件不支持输入负号（“-”），则可通过自定义键盘实现。示例代码如下：
    
    @Entry
    @Component
    struct TextInputSoftKeyboard {
      controller: TextInputController = new TextInputController();
      @State inputValue: string = '';
    
     _ // 自定义键盘组件_
      @Builder
      CustomKeyboardBuilder() {
        Column() {
          Row() {
            Row()
              .width(18);
            Row() {
            _  // 图片资源需伙伴自行更改相似向下箭头图标_
              Image($r('app.media.under'))
                .width(15)
                .fillColor('#000');
            }
            .justifyContent(FlexAlign.Center)
            .width(20)
            .height(18)
            .margin(10)
            .borderRadius(10)
            .onClick(() => {
            _  // 点击关闭软键盘_
              this.controller.stopEditing();
            });
          }
          .padding({ left: 24, right: 24 })
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween);
    
          Grid() {
            ForEach(\[1, 2, 3, 4, 5, 6, 7, 8, 9, '\*', 0, '#', '.', '+', '-'\], (item: number | string) => {
              GridItem() {
                Button(item + '')
                  .backgroundColor('#eaeaeb')
                  .width(110)
                  .fontColor('#000')
                  .onClick(() => {
                    this.inputValue += item;
                  });
              };
            });
          }
          .height('35%')
          .padding(10)
          .maxCount(3)
          .columnsGap(10)
          .rowsGap(10)
          .padding(5);
        }.backgroundColor('#d2d3d5');
      }
    
      build() {
        Column() {
          TextInput({ controller: this.controller, text: this.inputValue }) _// 添加key属性让焦点转移到指定组件上_
            .customKeyboard(this.CustomKeyboardBuilder())
            .margin(10);
        }
        .padding(16);
      }
    }
    

#### 常见FAQ

Q：想做出TextInput限制输入两位小数，再输入则不再显示的效果。使用自定义键盘设置TextInput的[inputFilter](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#inputfilter8)，自定义键盘输入三位小数后，onChange回调返回值为空，如何修改？

A：可以在onChange中使用[toFixed](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkts-decimal#tofixed)方法将浮点数格式化为保留两位小数的字符串后返回结果。

Q：TextInput如何在初始状态只获取焦点不拉起键盘？

A：通过[enableKeyboardOnFocus](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#enablekeyboardonfocus10)和[defaultFocus](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-focus#defaultfocus9)属性将TextInput设置为当前页面的默认焦点且不显示输入键盘。