群聊中@功能实现

GrootSwt

已于 2022-07-19 10:20:27 修改

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

于 2022-04-17 19:02:48 首次发布

本文链接：https://blog.youkuaiyun.com/GrootSwt/article/details/124234271

本文介绍了群聊中@功能的实现，包括输入框中输入@后弹出选择列表，选中条目自动生成@内容，以及键盘操作如Delete和BackSpace的删除功能。核心难点在于理解Selection和Range，以及处理@条目与不可见字符的关系。文章提供了核心代码，并提出了可扩展的功能，如选择面板的光标控制和位置动态调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能如下：

1、输入框中输入@弹出选择列表；

2、鼠标选中条目，在输入款中自动生成@条目；光标移动到@条目之后；

3、点击输入框中的@条目，选中@条目；

4、左右键自动跳过@条目；

5、实现Delete和BackSpace删除；

难点：

1、需要学习Selection和Range

2、任何操作实现都需要注意@条目（实为SPAN）与不可见字符（\u220B）之间的关系（一荣俱荣、一损俱损；共生关系）

以下代码为核心代码，在此之上可以进行扩展

可扩展功能1：展示选择面板列表后，首条目自动高亮，键盘上下键控制，鼠标控制（如果要实现此功能，注意鼠标使用onMouseMove事件，不要使用onMouseOver事件；如果使用onMouseOver，在出现滚动条时会与上下键冲突）

可扩展功能2：选择面板位置随着光标位置移动

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>contenteditable</title>
  <style>
    body {
      background: #e3e3e3;
    }

    .edit-box {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 100px;
      background: #FFFFFF;
    }

    #inputRef {
      background: #FFFFFF;
      width: 300px;
      height: 100px;
      overflow-y: a