聊天输入框@某人逻辑分类点说明

IM 应用软件无论是App端或者是PC端都有@某人这样一个功能点,由于用户输入框输入条件的复杂随机性种类多,@的针对不同情况进行拼接或者新增样式显示蓝色字体表示该人名可链接。由输入框开始,用户输入@的方式进行分类:

  1. 首字母为空,用户直接输入@,然后跳转到成员页面进行选择相关人员,选完即带回人名 结果为:“@某人”
  2. input输入框输入了文字的基础上: 在最前面下班为0的第1个位置进行插入@ 结果为:“@某人原input输入框的文字”
  3. input输入框输入了文字的基础上,在最后面下班为length-1的第后一个位置进行插入@ 结果为:“原input输入框的文字@某人”
  4. input输入框输入了文字的基础上,在文字内容中输入@。即条件 0 < index < length-1 结果为:“原input输入@某人框的文字”

在以上四种输入情况中,3,4 输入拼接@某人的时候,需要判断前一个字是否为@, 如果是,则后面拼接的时候直接+某人即可。另外当在第4种情况文字中间输入的时候,中英文下输入可能遇到文本框的值为 “ @@文字”,按照之前的逻辑当光标输入在第2个@后时,然后键盘输入@跳转页面选择成员,最后的结果应该是“ @@某人文字”这个组合,为了更友好地显示,还需检查当前两个也是@的时候,即出现1个@. 即结果为“ @某人文字” 以便更友好地显示。

核心逻辑:根据文本框原输入文字是否有内容,无内容时候直接拼接。有内容时候分两种情况,即光标的输入位置情况:当location等于0的时候,即在首位置输入@某人拼接原文本内容。当location大于0的时候,即光标可能出现在内容文字之间,也可能是在最后面。也是分两种情况:根据location+1判断是否小于原文本框文字长度length.如果小于,则表示在内容之间插入。否则,在内容最后尾部插入。无论是之间还是尾部做插入,都需检查前一个字符是否为@,如果是,则在做拼接人名时候就无需再追加@。当在之间做插入的时候,为了友好显示,可适当判断前两个字符为@@时候进行替换为一个@。

输入框@代码实现Pro版:
源码

评论