HarmonyOS鸿蒙Next中禁止TextInput输入/ &和emoji的方案

HarmonyOS鸿蒙Next中禁止TextInput输入/ &和emoji的方案

import { promptAction } from '@kit.ArkUI';

@Component
struct Page05 {
  oldText: string = "";
  @State text: string = '';
  controller: TextInputController = new TextInputController();
  private emojiRegex = /(\u00a9|\u00ae|[\u2000-\u3300]|[\uD83C-\uD83E][\uDC00-\uDFFF]|[\uD83E][\uDD00-\uDDFF])/g;

  build() {
    Column() {
      TextInput({ text: this.text, controller: this.controller })
        .width('95%')
        .height(40)
        .margin(20)
        .onChange((value: string) => {
          console.info(`value:${value}`)
          if (this.emojiRegex.test(value) || value.indexOf('/') != -1 || value.indexOf('&') != -1) {
            promptAction.showToast({ message: '不能包含表情符号!', alignment: Alignment.Center })
            this.text = this.oldText
          } else {
            this.text = this.oldText = value
          }
        })
    }
  }
}

建议使用onChange，虽然会闪一下，但是能解决问题。不建议使用onWillInsert，因为用户换输入法的时候就会失效。


更多关于HarmonyOS鸿蒙Next中禁止TextInput输入/ &和emoji的方案的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，要禁止TextInput输入特殊字符/、&和emoji，可以通过设置inputFilter实现。首先创建InputFilter，在onInputEvent回调中检查输入的字符。使用正则表达式匹配要过滤的字符，如[&/]|[\uD83C-\uDBFF\uDC00-\uDFFF]。若匹配到这些字符，返回空字符串阻止输入。示例代码：

let filter: inputMethod.InputFilter = {
  onInputEvent: (event: inputMethod.InputEvent) => {
    const pattern = /[&/]|[\uD83C-\uDBFF\uDC00-\uDFFF]/;
    if (pattern.test(event.text)) {
      return "";
    }
    return event.text;
  }
};
this.textInputController.setInputFilter(filter);

更多关于HarmonyOS鸿蒙Next中禁止TextInput输入/ &和emoji的方案的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，可以通过正则表达式结合TextInput的onChange事件实现输入限制。您提供的方案已经比较完善，这里补充几点优化建议：

  1. 正则表达式可以简化为：
private emojiRegex = /[\uD83C-\uD83E][\uDC00-\uDFFF]|[\u2000-\u3300]|[\u00a9\u00ae]/g;
  1. 对于特殊字符检测，可以使用更高效的方式：
if (this.emojiRegex.test(value) || /[\/&]/.test(value)) {
    // 处理非法输入
}
  1. 性能优化：可以缓存上一次的合法值，避免频繁更新：
@State lastValidText: string = '';
  1. 错误提示可以更明确：
promptAction.showToast({ 
    message: '不能包含表情符号或特殊字符(/&)', 
    alignment: Alignment.Center 
})

这种方案虽然会有短暂的回显，但在用户体验和功能实现上是最可靠的。

回到顶部