仿chatgpt光标自动移动到文本最后效果

概述

首先我们拿到这样一个需求的时候,首先可能想到的是通过伪元素来实现。但是如果这个文本是富文本,里面包含其他的标签,那就不太好实现了。

解决方法

  • 找到元素内容的最后一个文本节点
  • 在文本节点最后添加一个临时的文字
  • 获取最后一个文字相对视口的位置
  • 计算出相对文本实际位置,把实际位置给到光标
  • 移除临时位置光标

代码实现

既然上面已经有了思路,下面我们实际代码实现一下

样式和html代码

html 复制代码
<!DOCTYPE html>

<html lang="en">

  


<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

  


<style type="text/css">

.text-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;

}

.text {
    width: 80%;
    height: 400px;
}

// 光标
.cursor {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: red;
}

</style>

</head>

<body>
    <div class="text-container">
        <div class="text"></div>
        <div class="cursor"></div>
    </div>
    <script src="./common.js"></script>
</body>

</html>

获取元素

js 复制代码
const textContainer = document.querySelector('.text-container')
// 文本内容
const textElem = document.querySelector('.text')
// 光标
const cursor = document.querySelector('.cursor')

自动添加文本

js 复制代码
async function autoAppend() {

function delay(interval) {
    return new Promise(resolve => setTimeout(resolve, interval));
}
const content = `自动添加文本 asdf
    asides萨福;卡拉屎的飞机啊阿斯顿发生阿斯顿发生地方
    卡拉屎的飞机啊阿斯顿发生阿斯顿发生地方卡拉屎的飞机啊阿斯顿发生阿斯顿发生地方
    <span>asdf</span>
    卡拉屎的飞机啊阿斯顿发生阿斯顿发生wei
`

for (let i = 0; i < content.length; i++) {
    let text = content.slice(0, i);
    //let result = tranformText(text);
    textElem.innerHTML = text;
    updateCursor()
    await delay(300)
    
  }

}

获取最后一个文本节点

js 复制代码
function getLastTextNode(node) {
    if (node.nodeType === Node.TEXT_NODE) {
        return node;
    }
    let childNodes = node.childNodes;
    for (let i = childNodes.length - 1; i >= 0; i--) {
        let lastTextNode = getLastTextNode(childNodes[i]);
        if (lastTextNode) {
            return lastTextNode;
        }
    }
    return null;
}

获取光标位置

js 复制代码
function updateCursor() {

    // 找到最后一个文本节点
    const lastTextNode = getLastTextNode(textElem);
    // 在最后一个文本节点加文字
    const tempNode = document.createTextNode('|');

    if (lastTextNode) {
        lastTextNode.parentNode.insertBefore(tempNode, lastTextNode.nextSibling);
    }else{
        textElem.appendChild(tempNode);
    }
    //根据文本节点设置光标位置
    const range = document.createRange();
    //选中文本对象
    range.setStart(tempNode, 0);
    range.setEnd(tempNode, 0);

    // 获取相对视口位置
    const rect = range.getBoundingClientRect();
    // 获取容器相对视口位置
    const containerRect = textElem.getBoundingClientRect();

    const x = rect.left - containerRect.left;
    const y = rect.top - containerRect.top + 10;

    cursor.style.transform = `translate(${x}px, ${y}px)`;

    tempNode.remove();
}
相关推荐
麦兜*15 分钟前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
Jinkxs16 分钟前
JavaScript性能优化实战技术
开发语言·javascript·性能优化
知了一笑25 分钟前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室1 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~1 小时前
重学前端004 --- html 表单
前端·html
Maybyy1 小时前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈2 小时前
CSS中的Element语法
前端·css
Real_man2 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中2 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术2 小时前
日历插件-FullCalendar的详细使用
前端·javascript