HarmonyOS 鸿蒙Next 如何解决TextInput设置为密码输入模式时无法输入部分特殊字符问题

【问题现象】

设置TextInput.type为InputType.Password时，无法输入部分特殊字符，比如€ £ ¢ ¥。

【背景知识】

• TextInput.type为InputType.Password时，支持输入数字、字母空格和特殊字符等ASCII码表范围内的字符。
• 针对输入的内容，TextInput可以设置inputFilter属性，使用正则表达式设置输入过滤器，匹配表达式的可以输入，不匹配表达式的内容将被过滤。过滤器仅针对单个字符，不支持字符串匹配。

【定位思路】

TextInput的密码输入模式在默认情况下只支持ASCII****码表的字符，可以理解为：TextInput设置为密码输入模式情况下，默认自带inputFilter属性，非ASCII码表范围内的字符都会被过滤。因此如果要输入非ASCII码表的特殊字符，需要对inputFilter的正则表达式筛选规则进行修改。

由于一个TextInput只能适用一种过滤器，若对TextInput设置多个inputFilter属性，最后一个inputFilter过滤器的匹配规则会覆盖前面设置的过滤器规则。

因此，可以通过对密码输入模式下的TextInput再设置inputFilter，覆盖其默认情况下的匹配规则，并根据业务需求设置有效的正则表达式，即可输入ASCII码表以外的特殊字符。

【解决方案】

下面将对比默认情况下和设置了不同正则表达式下，密码输入模式可输入的字符区别，其中2、3分别实现非空字符输入和全字符输入。

代码示例如下：

@Entry
@Component
struct TextInputFilter {
  specialChars: string = '~!@#%^*_= +?$&()|<>{}[].€£¢¥'
  fontColor: number = 0xAAAAAA

  build() {
    Column({space: 20}) {
      Text('TextInput中输入以下字符串(在=和+之间有空格)：\n\n~!@#%^*_= +?$&()|<>{}[].€£¢¥')
        .fontSize('14fp')
        .fontColor(Color.Red)
      Column() {
        Text('1. 默认情况下的密码输入模式')
          .fontColor(this.fontColor)
          .padding({bottom: 5})
        /*
          默认情况下，密码输入模式可以正常显示空格和特殊字符串的部分字符~!@#%^*_= +?$&()|<>{}[].
         */
        TextInput({text: this.specialChars})
          .inputStyle()
      }
      Divider().height(20)
      Column() {
        Text('2. 密码输入模式可输入非空字符')
          .fontColor(this.fontColor)
          .padding({bottom: 5})
        /*
          正则表达式\\S+表示多个非空字符
          设置正则表达式\\S+后，密码输入模式支持非空字符的输入~!@#%^*_=+?$&()|<>{}[].€£¢¥
         */
        TextInput({text: this.specialChars})
          .inputStyle()
          .inputFilter('\\S+')
      }
      Divider().height(20)
      Column() {
        Text('3. 密码输入模式可输入全字符')
          .fontColor(this.fontColor)
          .padding({bottom: 5})
        /*
          正则表达式\\s+表示多个空格字符
          设置正则表达式\\S+|\\s+，密码输入模式支持全字符的输入~!@#%^*_= +?$&()|<>{}[].€£¢¥
         */
        TextInput({text: this.specialChars})
          .inputStyle()
          .inputFilter('\\S+|\\s+')
      }
    }.height('80%')
    .margin({top: 20, left: 10, right: 10})
  }
}

@Extend(TextInput) function inputStyle() {
  .type(InputType.Password)
  .showPassword(true)
}

效果如下：

【总结】

TextInput的密码输入模式（InputType.Password）默认支持部分特殊字符，针对默认未支持的特殊字符，可以通过灵活应用inputFilter属性，使用不同的正则表达式实现特殊字符的输入。