实现一个支持@的输入框

tech_zjf2024-04-16 10:01

近期产品期望在后台发布帖子或视频时，需要添加 @用户 的功能，以便用户收到通知，例如"xxx在xxx提及了您！"。然而，现有的开源库未能满足我们的需求，例如 ant-design 的 Mentions 组件：

但是不难发现跟微信飞书对比下，有两个细节没有处理。

  1. @用户没有高亮
  2. 在删除时没有当做一个整体去删除，而是单个字母删除，首先不谈用户是否想要整体删除，在这块有个模糊查询的功能，如果每删一个字母之后去调接口查询数据库造成一些不必要的性能开销，哪怕加上防抖。

然后也是找了其他的库都没达到产品的期望效果，那么好，自己实现一个，先看看最终实现的效果：

封装之后使用：

js 复制代码 
<AtInput
    height={150}
    onRequest={async (searchStr) => {
        const { data } = await UserFindAll({ nickname: searchStr });
        return data?.list?.map((v) => ({
            id: v.uid,
            name: v.nickname,
            wechatAvatarUrl: v.wechatAvatarUrl,
        }));
    }}
    onChange={(content, selected) => {
        setAtUsers(selected);
    }}
/>

那么实现这么一个输入框大概有以下几个点：

  1. 高亮效果
  2. 删除/选中用户时需要整体删除
  3. 监听@的位置，复制给弹框的坐标，联动效果
  4. 最后我需要拿到文本内容，并且需要拿到@那些用户，去做表单提交

大多数文本输入框我们会使用input,或者textarea,很明显以上1,2两点实现不了，antd也是使用的textarea，所以也是没有实现这两个效果。所以这块使用富文本编辑，设置contentEditable,将其变为可编辑去做。输入框以及选择器的dom就如下:

html 复制代码 
 <div style={{ height, position: 'relative' }}>
       {/* 编辑器 */}
       <div 
           id="atInput" 
           ref={atRef} 
           className={'editorDiv'} 
           contentEditable 
           onInput={editorChange} 
           onClick={editorClick} 
       />
       {/* 选择用户框 */}
       <SelectUser 
           options={options} 
           visible={visible} 
           cursorPosition={cursorPosition} 
           onSelect={onSelect} 
       />
 </div>

实现思路：

  1. 监听输入@，唤起选择框。
  2. 截取@xxx的xxx作为搜素的关键字去查询接口
  3. 选择用户后需要将原先输入的 @xxx 替换成 @姓名，并且将@的用户缓存起来
  4. 选择文本框中的姓名时需要变为整体选中状态，这块依然可以给标签设置为不可编辑状态就可实现,contentEditable=false,即可实现整体删除，在删除的同时需要将当前用户从之前缓存的@过的用户数组删除
  5. 那么可以拿到输入框的文本，@的用户， 最后将数据抛给父组件就完成了

以上提到了监听@文本变化，通常绑定onChange事件就行，但是还有一种用户通过点击移动光标，这块需要绑定change,click两个时间，他们里边的逻辑基本一样，只需要额外处理点击选中输入框中用户时，整体选中g功能，那么代码如下：

js 复制代码 
    const onObserveInput = () => {
        let cursorBeforeStr = '';
        const selection: any = window.getSelection();
        if (selection?.focusNode?.data) {
            cursorBeforeStr = selection.focusNode?.data.slice(0, selection.focusOffset);
        }
        setFocusNode(selection.focusNode);
        const lastAtIndex = cursorBeforeStr?.lastIndexOf('@');
        setCurrentAtIdx(lastAtIndex);
        if (lastAtIndex !== -1) {
            getCursorPosition();
            const searchStr = cursorBeforeStr.slice(lastAtIndex + 1);
            if (!StringTools.isIncludeSpacesOrLineBreak(searchStr)) {
                setSearchStr(searchStr);
                fetchOptions(searchStr);
                setVisible(true);
            } else {
                setVisible(false);
                setSearchStr('');
            }
        } else {
            setVisible(false);
        }
    };

    const selectAtSpanTag = (target: Node) => {
        window.getSelection()?.getRangeAt(0).selectNode(target);
    };

    const editorClick = async (event) => {
        onObserveInput();
        // 判断当前标签名是否为span 是的话选中当做一个整体
        if (e.target.localName === 'span') {
            selectAtSpanTag(e.target);
        }
    };

    const editorChange = (event) => {
        const { innerText } = event.target;
        setContent(innerText);
        onObserveInput();
    };

每次点击或者文本改变时都会去调用onObserveInput，以上onObserveInput该方法中主要做了以下逻辑：

  1. 通过getSelection方法可以获取光标的偏移位置，那么可以截取光标之前的字符串，并且使用lastIndexOf从后向前查找最后一个"@"符号，并记录他的下标，那么有了【光标之前的字符串】，【@的下标】就可以拿到到@之后用于过滤用户的关键字，并将其缓存起来。
  2. 唤起选择器，并通过关键字去过滤用户。这块涉及到一个选择器的位置，直接使用window.getSelection()?.getRangeAt(0).getBoundingClientRect()去获取光标的位置拿到的是光标相对于窗口的坐标，直接用这个坐标会有问题，比如滚动条滚动时，这个选择器发生位置错乱，所以这块同时去拿输入框的坐标，去做一个相减，这样就可以实现选择器跟着@符号联动的效果。
js 复制代码 
 const getCursorPosition = () => {
        // 坐标相对浏览器的坐标
        const { x, y } = window.getSelection()?.getRangeAt(0).getBoundingClientRect() as any;
        // 获取编辑器的坐标
        const editorDom = window.document.querySelector('#atInput');
        const { x: eX, y: eY } = editorDom?.getBoundingClientRect() as any;
        // 光标所在位置
        setCursorPosition({ x: x - eX, y: y - eY });
};

选择器弹出后，那么下面就到了选择用户之后的流程了，

js 复制代码 
 /**
     * @param id 唯一的id 可以uid
     * @param name 用户姓名
     * @param color 回显颜色
     * @returns
     */
    const createAtSpanTag = (id: number | string, name: string, color = 'blue') => {
        const ele = document.createElement('span');
        ele.className = 'at-span';
        ele.style.color = color;
        ele.id = id.toString();
        ele.contentEditable = 'false';
        ele.innerText = `@${name}`;
        return ele;
    };

    /**
     * 选择用户时回调
     */
    const onSelect = (item: Options) => {
        const selection = window.getSelection();
        const range = selection?.getRangeAt(0) as Range;
        // 选中输入的 @关键字  -> @郑
        range.setStart(focusNode as Node, currentAtIdx!);
        range.setEnd(focusNode as Node, currentAtIdx! + 1 + searchStr.length);
        // 删除输入的 @关键字
        range.deleteContents();
        // 创建元素节点
        const atEle = createAtSpanTag(item.id, item.name);
        // 插入元素节点
        range.insertNode(atEle);
        // 光标移动到末尾
        range.collapse();
        // 缓存已选中的用户
        setSelected([...selected, item]);
        // 选择用户后重新计算content
        setContent(document.getElementById('atInput')?.innerText as string);
        // 关闭弹框
        setVisible(false);
        // 输入框聚焦
        atRef.current.focus();
    };

选择用户的时候需要做的以下以下几点：

  1. 删除之前的@xxx字符
  2. 插入不可编辑的span标签
  3. 将当前选择的用户缓存起来
  4. 重新获取输入框的内容
  5. 关闭选择器
  6. 将输入框重新聚焦

最后

在选择的用户或者内容发生改变时将数据抛给父组件

js 复制代码 
 const getAttrIds = () => {
        const spans = document.querySelectorAll('.at-span');
        let ids = new Set();
        spans.forEach((span) => ids.add(span.id));
        return selected.filter((s) => ids.has(s.id));
    };

    /**  @的用户列表发生改变时，将最新值暴露给父组件 */
    useEffect(() => {
        const selectUsers = getAttrIds();
        onChange(content, selectUsers);
    }, [selected, content]);

完整组件代码

输入框主要逻辑代码：

js 复制代码 
let timer: NodeJS.Timeout | null = null;

const AtInput = (props: AtInputProps) => {
    const { height = 300, onRequest, onChange, value, onBlur } = props;
    // 输入框的内容=innerText
    const [content, setContent] = useState<string>('');
    // 选择用户弹框
    const [visible, setVisible] = useState<boolean>(false);
    // 用户数据
    const [options, setOptions] = useState<Options[]>([]);
    // @的索引
    const [currentAtIdx, setCurrentAtIdx] = useState<number>();
    // 输入@之前的字符串
    const [focusNode, setFocusNode] = useState<Node | string>();
    // @后关键字 @郑 = 郑
    const [searchStr, setSearchStr] = useState<string>('');
    // 弹框的x,y轴的坐标
    const [cursorPosition, setCursorPosition] = useState<Position>({
        x: 0,
        y: 0,
    });
    // 选择的用户
    const [selected, setSelected] = useState<Options[]>([]);
    const atRef = useRef<any>();

    /** 获取选择器弹框坐标 */
    const getCursorPosition = () => {
        // 坐标相对浏览器的坐标
        const { x, y } = window.getSelection()?.getRangeAt(0).getBoundingClientRect() as any;
        // 获取编辑器的坐标
        const editorDom = window.document.querySelector('#atInput');
        const { x: eX, y: eY } = editorDom?.getBoundingClientRect() as any;
        // 光标所在位置
        setCursorPosition({ x: x - eX, y: y - eY });
    };

    /**获取用户下拉列表 */
    const fetchOptions = (key?: string) => {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(async () => {
            const _options = await onRequest(key);
            setOptions(_options);
        }, 500);
    };

    useEffect(() => {
        fetchOptions();
        // if (value) {
        //     /** 判断value中是否有at用户 */
        //     const atUsers: any = StringTools.filterUsers(value);
        //     setSelected(atUsers);
        //     atRef.current.innerHTML = value;
        //     setContent(value.replace(/<\/?.+?\/?>/g, '')); //全局匹配内html标签)
        // }
    }, []);

    const onObserveInput = () => {
        let cursorBeforeStr = '';
        const selection: any = window.getSelection();
        if (selection?.focusNode?.data) {
            cursorBeforeStr = selection.focusNode?.data.slice(0, selection.focusOffset);
        }
        setFocusNode(selection.focusNode);
        const lastAtIndex = cursorBeforeStr?.lastIndexOf('@');
        setCurrentAtIdx(lastAtIndex);
        if (lastAtIndex !== -1) {
            getCursorPosition();
            const searchStr = cursorBeforeStr.slice(lastAtIndex + 1);
            if (!StringTools.isIncludeSpacesOrLineBreak(searchStr)) {
                setSearchStr(searchStr);
                fetchOptions(searchStr);
                setVisible(true);
            } else {
                setVisible(false);
                setSearchStr('');
            }
        } else {
            setVisible(false);
        }
    };

    const selectAtSpanTag = (target: Node) => {
        window.getSelection()?.getRangeAt(0).selectNode(target);
    };

    const editorClick = async (e?: any) => {
        onObserveInput();
        // 判断当前标签名是否为span 是的话选中当做一个整体
        if (e.target.localName === 'span') {
            selectAtSpanTag(e.target);
        }
    };

    const editorChange = (event: any) => {
        const { innerText } = event.target;
        setContent(innerText);
        onObserveInput();
    };

    /**
     * @param id 唯一的id 可以uid
     * @param name 用户姓名
     * @param color 回显颜色
     * @returns
     */
    const createAtSpanTag = (id: number | string, name: string, color = 'blue') => {
        const ele = document.createElement('span');
        ele.className = 'at-span';
        ele.style.color = color;
        ele.id = id.toString();
        ele.contentEditable = 'false';
        ele.innerText = `@${name}`;
        return ele;
    };

    /**
     * 选择用户时回调
     */
    const onSelect = (item: Options) => {
        const selection = window.getSelection();
        const range = selection?.getRangeAt(0) as Range;
        // 选中输入的 @关键字  -> @郑
        range.setStart(focusNode as Node, currentAtIdx!);
        range.setEnd(focusNode as Node, currentAtIdx! + 1 + searchStr.length);
        // 删除输入的 @关键字
        range.deleteContents();
        // 创建元素节点
        const atEle = createAtSpanTag(item.id, item.name);
        // 插入元素节点
        range.insertNode(atEle);
        // 光标移动到末尾
        range.collapse();
        // 缓存已选中的用户
        setSelected([...selected, item]);
        // 选择用户后重新计算content
        setContent(document.getElementById('atInput')?.innerText as string);
        // 关闭弹框
        setVisible(false);
        // 输入框聚焦
        atRef.current.focus();
    };

    const getAttrIds = () => {
        const spans = document.querySelectorAll('.at-span');
        let ids = new Set();
        spans.forEach((span) => ids.add(span.id));
        return selected.filter((s) => ids.has(s.id));
    };

    /**  @的用户列表发生改变时，将最新值暴露给父组件 */
    useEffect(() => {
        const selectUsers = getAttrIds();
        onChange(content, selectUsers);
    }, [selected, content]);

    return (
        <div style={{ height, position: 'relative' }}>
            {/* 编辑器 */}
            <div id="atInput" ref={atRef} className={'editorDiv'} contentEditable onInput={editorChange} onClick={editorClick} />
            {/* 选择用户框 */}
            <SelectUser options={options} visible={visible} cursorPosition={cursorPosition} onSelect={onSelect} />
        </div>
    );
};

选择器代码

js 复制代码 
const SelectUser = React.memo((props: SelectComProps) => {
  const { options, visible, cursorPosition, onSelect } = props;

  const { x, y } = cursorPosition;

  return (
    <div
      className={'selectWrap'}
      style={{
        display: `${visible ? 'block' : 'none'}`,
        position: 'absolute',
        left: x,
        top: y + 20,
      }}
    >
      <ul>
        {options.map((item) => {
          return (
            <li
              key={item.id}
              onClick={() => {
                onSelect(item);
              }}
            >
              <img src={item.wechatAvatarUrl} alt="" />
              <span>{item.name}</span>
            </li>
          );
        })}
      </ul>
    </div>
  );
});
export default SelectUser;

以上就是实现一个支持@用户的输入框功能，就目前而言，比较死板，不支持自定义颜色，自定义选择器等等，未来，可以进一步扩展功能，例如添加@用户的高亮样式定制、支持键盘快捷键操作等，从而提升用户体验和功能性。

相关推荐
gqkmiss4 分钟前
Chrome 浏览器 131 版本开发者工具（DevTools）更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃10 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰14 分钟前
Flutter踩坑记录（二）-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye21 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm23 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南：掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack：compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿