实现chatgpt光标打字效果

实现chatgpt光标打字效果

实现一个光标打字机的效果，光标的位置是跟随在文本的末尾。

例如我们渲染的dom节点如下，光标的位置则在xxx2的后面。换句话说光标是在我们dom中最后一个文本节点的后面

<div>
  <p>
    段落1
  </p>
  <ul>
    <li>XXX1</li>
    <li>XXX2</li>
  </ul>
</div>

1.实现添加光标方法

// 实现添加光标方法
   addCursorBlink(dom) { // 传入需要添加光标样式的dom
        function findLastTextNode(node) {
          if (Array.from(node.childNodes).length) {
            if (Array.from(node.childNodes).reverse()[0].nodeType === Node.TEXT_NODE) {
              // 判断最后一个节点是否是文本节点 
              return Array.from(node.childNodes).reverse()[0];
            }
            return findLastTextNode(Array.from(node.childNodes).reverse()[0]);
          }
          // 没有子节点则直接返回
          return node;
        }
        const lastNode = findLastTextNode(dom);
        const span = document.createElement('span'); // 创建一个光标元素
        span.className = 'blinking-cursor'; // 添加自定义光标样式的类名
        span.id = 'cursor-blink';
        if (lastNode.nodeType === Node.TEXT_NODE) {
          // 找到最后一个文本节点 则在最后添加该元素
          lastNode.parentNode.insertBefore(span, lastNode.nextSibling);
        } else {
          lastNode.appendChild(span);
        }
    },

2.移除光标

  removeCursorBlink() {
        const cursorBlink = document.getElementById('cursor-blink');
        cursorBlink?.remove();
    }

这样简单实现一个光标打字机的效果了