TextInput的placeholder文本显示不完整如何解决
================================

#### 问题现象

当TextInput组件的placeholder文本过长时，会导致显示不完整，影响用户体验，该如何优化这一问题？

#### 背景知识

*   [TextInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput)为单行文本输入框组件，placeholder为设置无输入时的提示文本，可通过[placeholderFont](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#placeholderfont)和[placeholderColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#placeholdercolor)设置placeholder文本样式和文本颜色，包括字体大小，字体粗细，字体族，字体风格等。
*   [TextArea](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textarea)为多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。
*   [promptAction](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uicontext-promptaction)可创建并显示文本提示框、对话框和操作菜单。

#### 解决方案

TextInput组件的placeholder文本较长时，默认会使用省略号来截断过长的文本。可通过以下四种方案让placeholder文本显示完整。

*   **方案一**：使用promptAction创建文本提示框来展示整个placeholder文本。
    
    @Entry
    @Component
    struct TextInputExample {
      @State text: string \= '';
      controller: TextInputController \= new TextInputController();
      @State placeholder: string \= 'input your word';
    
      build() {
        Column() {
          TextInput({ text: this.text, placeholder: this.placeholder, controller: this.controller })
            .placeholderColor(Color.Grey)
            .placeholderFont({ size: 14, weight: 400 })
            .caretColor(Color.Blue)
            .width('30%')
            .margin(20)
            .fontSize(14)
            .fontColor(Color.Black)
            .inputFilter('\[0-9\]', (e) \=\> {
              console.error(e);
            })
            .onClick(() \=\> {
              this.getUIContext().getPromptAction().showToast({ message: this.placeholder });
            })
            .onChange((value: string) \=\> {
              this.text \= value;
            })
        }
        .width('100%')
        .backgroundColor(Color.White)
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f4/v3/MqH0Gp9uS-uSbeHj2Mw0ug/zh-cn_image_0000002658917661.png?HW-CC-KV=V1&HW-CC-Date=20260709T133920Z&HW-CC-Expire=86400&HW-CC-Sign=529889DD02CF54B44522269AAECC35580DF6A19DE2F4DFE3BD7C38E36AF703F4 "点击放大")
    
*   **方案二**：使用TextArea组件，组件不设置高度时，会自适应内容高度，从而实现placeholder多行显示。
    
    @Entry
    @Component
    struct TextInputExample2 {
      @State text: string \= '';
      controller: TextAreaController \= new TextAreaController();
    
      build() {
        Column() {
          TextArea({ text: this.text, placeholder: 'input your word', controller: this.controller })
            .placeholderColor(Color.Grey)
            .placeholderFont({ size: 14, weight: 400 })
            .caretColor(Color.Blue)
            .width('30%')
            .margin(20)
            .fontSize(14)
            .fontColor(Color.Black)
            .inputFilter('\[0-9\]', (e) \=\> {
              console.error(e);
            })
            .onChange((value: string) \=\> {
              this.text \= value;
            })
        }
        .width('100%')
        .backgroundColor(Color.White)
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f/v3/DlFATeRMRq6Iefch7ekpLA/zh-cn_image_0000002628398434.png?HW-CC-KV=V1&HW-CC-Date=20260709T133920Z&HW-CC-Expire=86400&HW-CC-Sign=7B75C7C16661092DBB4F7653D8AA8DB360F4F37DEE56171F9FFB4EDCCAF5EA58 "点击放大")
    
*   **方案三**：placeholder文本大小默认为16fp，可通过placeholderFont将placeholder文本大小设置小一点，如10fp。
    
    @Entry
    @Component
    struct TextInputExample3 {
      @State text: string \= '';
      controller: TextInputController \= new TextInputController();
    
      build() {
        Column() {
          TextInput({ text: this.text, placeholder: 'input your word', controller: this.controller })
            .placeholderColor(Color.Grey)
            .placeholderFont({ size: 10, weight: 400 })
            .caretColor(Color.Blue)
            .width('30%')
            .margin(20)
            .fontSize(14)
            .fontColor(Color.Black)
            .inputFilter('\[0-9\]', (e) \=\> {
              console.error(e);
            })
            .onChange((value: string) \=\> {
              this.text \= value;
            })
        }
        .width('100%')
        .backgroundColor(Color.White)
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/53/v3/uy1i3LaORd6dPMAbv_YcBA/zh-cn_image_0000002658797717.png?HW-CC-KV=V1&HW-CC-Date=20260709T133920Z&HW-CC-Expire=86400&HW-CC-Sign=C34866658C2F664D6E8494BA201D469CD1129BC9D6150CC0A303655706BB5386 "点击放大")
    
*   **方案四**：可设置TextInput的[style](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#style9)为Inline，文本选中底板高度与输入框高度相同，在输入时可显示全部placeholder文本。
    
    @Entry
    @Component
    struct TextInputExample4 {
      @State text: string \= '';
      controller: TextInputController \= new TextInputController();
    
      build() {
        Column() {
          TextInput({ text: this.text, placeholder: 'input your word', controller: this.controller })
            .placeholderColor(Color.Grey)
            .placeholderFont({ size: 14, weight: 400 })
            .caretColor(Color.Blue)
            .width('30%')
            .margin(20)
            .fontSize(14)
            .fontColor(Color.Black)
            .style(TextInputStyle.Inline)
            .wordBreak(WordBreak.BREAK\_WORD)
            .inputFilter('\[0-9\]', (e) \=\> {
              console.error(e);
            })
            .onChange((value: string) \=\> {
              this.text \= value;
            })
        }
        .width('100%')
        .backgroundColor(Color.White)
      }
    }
    
    效果预览：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/4a/v3/4e-VJS15Qc-jhYAHbRLYhg/zh-cn_image_0000002628558352.png?HW-CC-KV=V1&HW-CC-Date=20260709T133920Z&HW-CC-Expire=86400&HW-CC-Sign=B51D104655DC34F21066F225FDE22A18FFB0E86202C755E3AB46D7F8756E10C6 "点击放大")
    

#### 总结

四种方案的特点如下表：

| 
方案

 | 

特点

 |
| :-- | :-- |
| 

使用promptAction创建文本提示框

 | 

通过弹窗显示placeholder文本，不会破坏原有的页面布局。

 |
| 

使用TextArea组件替代TextInput组件

 | 

若页面布局时高度足够显示多行，可以使用TextArea组件，但不支持设置type为密码类型。

 |
| 

通过placeholderFont修改placeholder文本大小

 | 

适用于placeholder文本相对较短的场景，但字体设置太小会影响开发者的阅读体验。

 |
| 

设置TextInput组件的style为Inline

 | 

在输入时输入框高度会变化，会导致布局变化，可根据具体需要选择。

 |