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

问题现象

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

背景知识

TextInput为单行文本输入框组件，placeholder为设置无输入时的提示文本，可通过placeholderFont和placeholderColor设置placeholder文本样式和文本颜色，包括字体大小，字体粗细，字体族，字体风格等。
TextArea为多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。
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)
  }
}

效果预览：

点击放大

方案二：使用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)
  }
}

效果预览：

点击放大

方案三：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)
  }
}

效果预览：

点击放大

方案四：可设置TextInput的style为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)
  }
}

效果预览：

点击放大

总结

四种方案的特点如下表：

方案	特点
使用promptAction创建文本提示框	通过弹窗显示placeholder文本，不会破坏原有的页面布局。
使用TextArea组件替代TextInput组件	若页面布局时高度足够显示多行，可以使用TextArea组件，但不支持设置type为密码类型。
通过placeholderFont修改placeholder文本大小	适用于placeholder文本相对较短的场景，但字体设置太小会影响开发者的阅读体验。
设置TextInput组件的style为Inline	在输入时输入框高度会变化，会导致布局变化，可根据具体需要选择。

目录

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

问题现象

背景知识

解决方案

总结