问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

react或者vue 如何实现ChatGPT 光标文字追随 效果？

头像头饰
Awbeci
    3.1k64393521

    实现下面图中效果,？
    image.png

    vue.jsreact
    阅读 1k
    avatarAI BotBETA

    要实现ChatGPT光标文字追随效果，可以使用以下步骤：

    1. 在React或Vue应用程序中，使用一个文本输入框（textarea）或输入框（input）来接收用户输入。
    2. 当用户输入文本时，监听输入框的input事件或change事件，以便在文本发生变化时更新应用程序的状态。
    3. 在事件处理程序中，获取输入框中当前选中的文本，并将其存储在应用程序的状态中。
    4. 使用CSS样式来控制光标的位置和文本的追随效果。可以使用CSS的::selection伪元素来设置选中文本的颜色和背景色，并使用CSS的position属性来控制光标的位置。

    下面是一个简单的React示例代码，演示如何实现ChatGPT光标文字追随效果：

    import React, { useState } from "react";

const ChatGPT = () => {
  const [text, setText] = useState("");
  const [selectedText, setSelectedText] = useState("");

  const handleChange = (event) => {
    setText(event.target.value);
    setSelectedText(""); // Clear selected text when user starts typing again
  };

  const handleSelectionChange = (event) => {
    const selectedText = event.target.value.slice(event.target.selectionStart, event.target.selectionEnd);
    setSelectedText(selectedText);
  };

  return (
    <div>
      <textarea value={text} onChange={handleChange} onSelectionChange={handleSelectionChange} />
      {selectedText && <span style={{ color: "yellow", backgroundColor: "black" }}>{selectedText}</span>}
    </div>
  );
};

export default ChatGPT;

    这个示例中，我们使用了textarea元素来接收用户输入，并监听了change和selectionchange事件。当用户输入文本时，handleChange函数会更新应用程序的状态，而handleSelectionChange函数会获取当前选中的文本并更新应用程序的状态。最后，我们使用了一个条件渲染语句来显示选中的文本，并使用CSS样式来控制其颜色和背景色。

    1 个回答
    得票最新
    头像头饰
    Awbeci
      3.1k64393521
      ✓ 已被采纳

      我自己实现了

      &:last-child{
// 如果ai输出结束了，刚不显示伪元素after
  .stop > *:last-child{
    &:after{
      content: none !important;
    }
  }
  // 节点空时设置光标跟随
  .chat:empty{
    position: relative;
    &:after{
      display: inline-block;
      content: "";
      width: 4px;
      height: 14px;
      transform: translate(4px,2px) scaleY(1.3);
      background-color: #80c9ff;
      animation: cursor .6s infinite;
      overflow-wrap: break-word;
      box-sizing: border-box;
    }
  }
  // 获取最后一个子节点并设置光标跟随
  .chat > *:last-child {
    position: relative;
    &:after{
      display: inline-block;
      content: "";
      width: 4px;
      height: 14px;
      transform: translate(4px,2px) scaleY(1.3);
      background-color: #80c9ff;
      animation: cursor .6s infinite;
      overflow-wrap: break-word;
      box-sizing: border-box;
    }
  }
}

      image.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏