HarmonyOS鸿蒙Next中使用RichEditor，应用实现最大显示字数的设置，输入emoji超出最大字数限制，导致emoji被截断，显示异常的解决方法

HarmonyOS鸿蒙Next中使用RichEditor，应用实现最大显示字数的设置，输入emoji超出最大字数限制，导致emoji被截断，显示异常的解决方法

咨询描述：我们有个需求是设置输入框的字数上线, 假如设置字数上限为100字, 输入99字后, 再输入一个emoji(系统会认为是2个字)触发截取, emoji截取了半截, 然后剩下的内容设置给RichEditor组件后会造成所有的内容无法显示, 这种问题怎么处理?

3 回复

可以参考这个demo，识别句尾的emoji，通过总长度的判断决定是否插入文本：

class EmojisAndPosition {
  emoji: string = ''; // 表情内容
  position: number = 0; // 表情开始的位置
  length: number = 0 // 表情占用的字符数

  constructor(emoji: string, position: number, length: number) {
    this.emoji = emoji;
    this.position = position;
    this.length = length;
  }
}

function findEmojis(str: string): EmojisAndPosition[] {
    const emojiRegex =
      /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}]/gu;

    let match: RegExpExecArray | null;
    const positions: EmojisAndPosition[] = [];

    // 使用正则表达式查找所有表情字符
    while ((match = emojiRegex.exec(str)) !== null) {
      let obj = new EmojisAndPosition(match[0], match.index, match[0].length)
      positions.push(obj);
    }
    return positions;
  }

更多关于HarmonyOS鸿蒙Next中使用RichEditor，应用实现最大显示字数的设置，输入emoji超出最大字数限制，导致emoji被截断，显示异常的解决方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用RichEditor时，由于emoji占用的字符长度与普通字符不同，可能导致超出最大字数限制时emoji被截断。解决方法是使用TextUtils.getCharsLength()获取字符的实际长度，确保emoji被正确计算。在设置最大字数时，通过判断字符长度是否超出限制，避免emoji被截断。具体实现是在输入时实时计算字符长度，并在超出限制时停止输入。

在HarmonyOS Next中使用RichEditor处理emoji截断问题，可以通过以下方案解决：

  1. 字符计数优化： 建议改用UTF-16编码方式计算字符长度，确保emoji被正确识别为单个字符。可以使用TextUtils.getChars()方法获取实际字符数。

  2. 输入拦截处理： 在onTextChange回调中实时检测：

  • 计算当前文本长度（含emoji）
  • 当接近限制时(如达到maxLength-1)，阻止继续输入
  • 提示用户"已达最大字符限制"
  1. 截断保护机制： 对超限文本处理时：
  • 先完整取出最后一个unicode字符
  • 判断是否为emoji(通过Character.isSurrogatePair())
  • 如果是emoji则整体移除该字符
  1. 推荐方案：
function safeTruncate(text: string, maxLength: number) {
  if (text.length <= maxLength) return text;
  
  // 处理可能被截断的emoji
  let lastChar = text.charAt(maxLength-1);
  let nextChar = text.charAt(maxLength);
  if (Character.isSurrogatePair(lastChar, nextChar)) {
    return text.substring(0, maxLength-1);
  }
  return text.substring(0, maxLength);
}
  1. 容错处理： 在设置内容前先检查文本有效性，避免因截断导致渲染异常：
if (!TextUtils.isValidText(truncatedText)) {
  // 回退到上一次有效内容
}

这种方法能有效避免emoji被截断导致的显示问题，同时保证字数限制功能正常。

回到顶部