当前位置: 首页 > news >正文

仿豆包智能输入框实现

基于react框架,实现效果如下:

目前只实现了标签添加,后续可能会用作输入模板填入,包含下拉、高亮等。

实现原理:HTML的标签拥有 contenteditable 字段,将DOM交给浏览器,进行可编辑操作。

纯HTML/JS的布局结构可以如下:

<div id="editor" contenteditable="true"><span contenteditable="false" class="tag">标签1</span><span contenteditable="true" id="inputArea"></span>
</div>

但React框架这样写会报错:

原因:

故,只能动态添加子元素:

    // 创建 用户输入区域 元素const createInputAreaElement = () => {const inputArea = document.createElement('span');inputArea.contentEditable = 'true';// 给一个空格占位符inputArea.innerHTML = defaultValue || '&nbsp;';inputArea.className = editorCss.userInputArea;return inputArea;}

输入区域需给一个空格占位符,避免span没宽度 

    // 创建输入区域useEffect(() => {const editor = contentRef.current;if (!editor) return;const userInput = createInputAreaElement();userInputRef.current = userInput;   // 记录用户输入区域// 初始添加提示和输入区域const placeholderArea = createPlaceholderElement();placeholderRef.current = placeholderArea;userInput.appendChild(placeholderArea)editor.appendChild(userInput);// 输入区域事件监听userInput.addEventListener('focus', handleFocus)userInput.addEventListener('blur', handleBlur)userInput.addEventListener('input', handleInput)}, []);
    return (<divref={contentRef}contentEditable={false}></div>);

主要步骤:

1. 组件初始化时,创建输入区域元素,将其添加到 contentRef 中。

2. 此处的输入区域做了 提示内容,将提示区域作为了输入区域的子元素,故需区分用户输入与提示内容

// 1. 提示区域设置data
placeholder.dataset.placeholder = 'true';// 2. 获取用户输入内容function getUserInputText() {const userInput = userInputRef.current;if (!userInput) return '';let text = '';userInput.childNodes.forEach(node => {if (node.nodeType === Node.TEXT_NODE) {text += node.textContent;} else if (node.nodeType === Node.ELEMENT_NODE) {const el = node as HTMLElement;if (!el.hasAttribute('data-placeholder')) {text += el.textContent;}}});return text.trim();}

3. 为输入区域添加事件监听:focus、blur、input,修改提示区域的显隐状态

4. 对外暴露添加标签操作,将标签插入到输入区域之前(也可选择插入到光标处)

  // 插入标签const insertTag = useCallback((tag: string) => {const editor = contentRef.current;const inputArea = userInputRef.current;const placeholder = placeholderRef.current;if (!editor || !inputArea) {console.log("容器未准备好!editor: ", editor, "input:", inputArea)return};// 创建新标签元素const newTag = createTagElement(tag);// 操作会导致失焦editor.insertBefore(newTag, inputArea)if (placeholder) {placeholder.style.display = 'none';}// ✅ 延迟聚焦,避免事件冲突setTimeout(() => {inputArea.focus();}, 0);}, []);

完整布局代码:不包含样式文件 

import React, {useState, useRef, useCallback, forwardRef, useImperativeHandle, useEffect} from 'react';
import editorCss from './editor.module.css';export interface EditHandler {insertTag: (tag: string) => void;setValue: (newValue: string) => void;
}interface EditProps {defaultValue?: string;onChange?: (html: string) => void;deleteTag?: (tag: string) => void;placeholderText?: string;
}const EditableWithTags = forwardRef<EditHandler, EditProps>((props, ref) => {const { defaultValue, onChange, deleteTag, placeholderText } = propsconst contentRef = useRef<HTMLDivElement>(null);const placeholderRef = useRef<HTMLSpanElement>(null);const userInputRef = useRef<HTMLSpanElement>(null);const isFocusedRef = useRef(false);// 暴露方法给外部useImperativeHandle(ref, () => ({insertTag: (tag: string) => {insertTag(tag);},setValue: (newValue: string) => {userInputRef.current.innerHTML = newValue;}}));// 创建 svg - 删除图标const svgDelete = () => {const svgNS = 'http://www.w3.org/2000/svg';const svg = document.createElementNS(svgNS, 'svg');svg.setAttribute('width', '12');svg.setAttribute('height', '12');svg.setAttribute('viewBox', '0 0 16 16');svg.setAttribute('fill', 'none');const path = document.createElementNS(svgNS, 'path');path.setAttribute('d','M9.625 1.08743C10.5677 1.63172 11.3518 2.41276 11.8999 3.35325C12.4479 4.29373 12.7409 5.36104 12.7496 6.44952C12.7584 7.538 12.4828 8.6099 11.95 9.55912C11.4172 10.5083 10.6458 11.3019 9.71203 11.8614C8.77828 12.4208 7.71461 12.7267 6.62631 12.7487C5.53802 12.7707 4.46284 12.5082 3.50722 11.987C2.5516 11.4658 1.74867 10.704 1.17792 9.77713C0.607164 8.85025 0.288381 7.79038 0.253125 6.70243L0.25 6.49993L0.253125 6.29743C0.288127 5.21805 0.602217 4.16616 1.16477 3.2443C1.72733 2.32245 2.51916 1.56209 3.46306 1.03736C4.40696 0.512628 5.47072 0.241431 6.55063 0.250206C7.63054 0.258982 8.68976 0.547431 9.625 1.08743ZM5.56938 4.71243C5.43843 4.63448 5.28351 4.60706 5.13376 4.63533C4.98401 4.66359 4.84974 4.7456 4.75622 4.86592C4.66269 4.98624 4.61635 5.13659 4.62591 5.28868C4.63547 5.44078 4.70027 5.58414 4.80813 5.69181L5.61563 6.49993L4.80813 7.30806L4.75625 7.36681C4.65912 7.49243 4.61344 7.65031 4.6285 7.80838C4.64356 7.96646 4.71822 8.11288 4.83733 8.2179C4.95643 8.32292 5.11104 8.37867 5.26976 8.37382C5.42848 8.36898 5.5794 8.3039 5.69188 8.19181L6.5 7.38431L7.30813 8.19181L7.36688 8.24368C7.4925 8.34081 7.65038 8.38649 7.80845 8.37143C7.96653 8.35637 8.11295 8.28171 8.21797 8.16261C8.32299 8.0435 8.37874 7.88889 8.37389 7.73017C8.36905 7.57145 8.30397 7.42053 8.19188 7.30806L7.38438 6.49993L8.19188 5.69181L8.24375 5.63306C8.34088 5.50744 8.38656 5.34956 8.3715 5.19148C8.35644 5.0334 8.28178 4.88698 8.16268 4.78196C8.04357 4.67694 7.88896 4.62119 7.73024 4.62604C7.57152 4.63089 7.4206 4.69596 7.30813 4.80806L6.5 5.61556L5.69188 4.80806L5.63313 4.75618L5.56938 4.71243Z');path.setAttribute('fill', '#666');svg.appendChild(path);return svg;};// 创建svg - 提示图标function svgStar() {// 创建 <svg> 元素const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");svg.setAttribute("width", "1rem");svg.setAttribute("height", "1rem");svg.setAttribute("viewBox", "0 0 18 18");svg.setAttribute("fill", "none");// 创建 <g> 元素const g = document.createElementNS("http://www.w3.org/2000/svg", "g");g.setAttribute("clip-path", "url(#clip0_274_2837)");// 创建 <path> 元素const path = document.createElementNS("http://www.w3.org/2000/svg", "path");path.setAttribute("d",`M12.6667 14.4998C13.1529 14.4998 13.6192 14.693 13.963 15.0368C14.3068 15.3806 14.5 15.8469 14.5 16.3332C14.5 15.8469 14.6932 15.3806 15.037 15.0368C15.3808 14.693 15.8471 14.4998 16.3333 14.4998C15.8471 14.4998 15.3808 14.3067 15.037 13.9629C14.6932 13.619 14.5 13.1527 14.5 12.6665C14.5 13.1527 14.3068 13.619 13.963 13.9629C13.6192 14.3067 13.1529 14.4998 12.6667 14.4998ZM12.6667 3.49984C13.1529 3.49984 13.6192 3.69299 13.963 4.03681C14.3068 4.38062 14.5 4.84694 14.5 5.33317C14.5 4.84694 14.6932 4.38062 15.037 4.03681C15.3808 3.69299 15.8471 3.49984 16.3333 3.49984C15.8471 3.49984 15.3808 3.30668 15.037 2.96287C14.6932 2.61905 14.5 2.15273 14.5 1.6665C14.5 2.15273 14.3068 2.61905 13.963 2.96287C13.6192 3.30668 13.1529 3.49984 12.6667 3.49984ZM6.25 14.4998C6.25 13.0411 6.82946 11.6422 7.86091 10.6107C8.89236 9.5793 10.2913 8.99984 11.75 8.99984C10.2913 8.99984 8.89236 8.42037 7.86091 7.38892C6.82946 6.35747 6.25 4.95853 6.25 3.49984C6.25 4.95853 5.67054 6.35747 4.63909 7.38892C3.60764 8.42037 2.20869 8.99984 0.75 8.99984C2.20869 8.99984 3.60764 9.5793 4.63909 10.6107C5.67054 11.6422 6.25 13.0411 6.25 14.4998Z`);path.setAttribute("stroke", "#878787");path.setAttribute("stroke-width", "1.5");path.setAttribute("stroke-linecap", "round");path.setAttribute("stroke-linejoin", "round");g.appendChild(path);// 创建 <defs> 和 <clipPath>const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");const clipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");clipPath.setAttribute("id", "clip0_274_2837");const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");rect.setAttribute("width", "22");rect.setAttribute("height", "22");rect.setAttribute("fill", "white");rect.setAttribute("transform", "translate(0 0.5)");clipPath.appendChild(rect);defs.appendChild(clipPath);// 组装 SVGsvg.appendChild(g);svg.appendChild(defs);return svg;}// 创建 tag 元素const createTagElement = (tag: string) => {const newTag = document.createElement('span');newTag.contentEditable = 'false';newTag.classList.add(editorCss.newTag)// 创建文本元素const text = document.createElement('span');text.innerText = `[${tag}]`;text.contentEditable = 'false';text.classList.add(editorCss.editableTag);const deleteBtn = document.createElement('span');deleteBtn.className = editorCss.deleteButton;const svg = svgDelete();deleteBtn.appendChild(svg);// 删除事件绑定deleteBtn.addEventListener('click', (e) => {e.preventDefault();newTag.remove();deleteTag(tag)});text.appendChild(deleteBtn);newTag.appendChild(text)return newTag;};// 创建 提示 元素const createPlaceholderElement = () => {const placeholder = document.createElement('span');placeholder.className = editorCss.inputAreaPlaceholder;placeholder.dataset.placeholder = 'true';  // 用于区分提示文本与用户输入const svg = svgStar();// placeholder.appendChild(svg);const text = document.createElement('span');text.innerText = placeholderText || '请输入内容';// text.className = editorCss.inputAreaPlaceholder;placeholder.appendChild(text);return placeholder;}// 创建 用户输入区域 元素const createInputAreaElement = () => {const inputArea = document.createElement('span');inputArea.contentEditable = 'true';// 给一个空格占位符inputArea.innerHTML = defaultValue || '&nbsp;';inputArea.className = editorCss.userInputArea;return inputArea;}/** 输入区域聚焦 */const handleFocus = () => {isFocusedRef.current = trueconst placeholder = placeholderRef.current;if (placeholder) {placeholder.style.display = 'none';}const userInput = userInputRef.current;if (userInput) {userInput.focus()}}/** 输入区域失焦 */const handleBlur = () => {isFocusedRef.current = falseconst placeholder = placeholderRef.current;if (getUserInputText() === '') {placeholder.style.display = 'inline-flex';}}/** 输入监听 */const handleInput = () => {onChange(getUserInputText())const isFocused = isFocusedRef.current;if (userInputRef.current.textContent.trim() !== '' || isFocused) {placeholderRef.current.style.display = 'none';} else {placeholderRef.current.style.display = 'inline-flex';}}/** 获取用户输入文本 */function getUserInputText() {const userInput = userInputRef.current;if (!userInput) return '';let text = '';userInput.childNodes.forEach(node => {if (node.nodeType === Node.TEXT_NODE) {text += node.textContent;} else if (node.nodeType === Node.ELEMENT_NODE) {const el = node as HTMLElement;if (!el.hasAttribute('data-placeholder')) {text += el.textContent;}}});return text.trim();}// 创建输入区域useEffect(() => {const editor = contentRef.current;if (!editor) return;const userInput = createInputAreaElement();userInputRef.current = userInput;   // 记录用户输入区域// 初始添加提示和输入区域const placeholderArea = createPlaceholderElement();placeholderRef.current = placeholderArea;userInput.appendChild(placeholderArea)editor.appendChild(userInput);// 输入区域事件监听userInput.addEventListener('focus', handleFocus)userInput.addEventListener('blur', handleBlur)userInput.addEventListener('input', handleInput)}, []);// 插入标签const insertTag = useCallback((tag: string) => {const editor = contentRef.current;const inputArea = userInputRef.current;const placeholder = placeholderRef.current;if (!editor || !inputArea) {console.log("容器未准备好!editor: ", editor, "input:", inputArea)return};// 创建新标签元素const newTag = createTagElement(tag);// 操作会导致失焦editor.insertBefore(newTag, inputArea)if (placeholder) {placeholder.style.display = 'none';}// ✅ 延迟聚焦,避免事件冲突setTimeout(() => {inputArea.focus();}, 0);}, []);return (<divref={contentRef}contentEditable={false}></div>);
});export default EditableWithTags;

http://www.dtcms.com/a/273014.html

相关文章:

  • python基础25_某大网校(下)处理json数据以及保存题库
  • 安全访问云端内部应用:用frp的stcp功能解决SSH转发的痛点
  • Linux驱动开发(platform 设备驱动)
  • 老题新解|矩阵转置
  • AI驱动的业务系统智能化转型:从非结构化到结构化的智能转换
  • 【STM32 学习笔记】FLASH闪存
  • pytorch学习-12循环神经网络(基础篇)
  • 机器视觉之激光码检测系统
  • 【世纪龙科技】学测-汽车信息化综合实训考核平台(机电方向)
  • 数字孪生系统如何助力汽车零部件企业实现虚拟智控
  • RedisJSON 内存占用剖析与调优
  • Lua嵌入式爬虫实现步骤
  • 【Linux系统】冯诺依曼体系结构 | 初识操作系统
  • 生产者、消费者问题(C语言、POSIX)
  • 测试覆盖标准-条件覆盖-短路求值
  • 全新开源AI知识库系统!PandaWiki一键构建智能文档,支持AI问答、创作与搜索!
  • [特殊字符] 05_Jenkins 部署前端项目实现自动化部署
  • rv1106使用笔记
  • 【RL-VLM-F】算法框架图绘图学习笔记
  • ubuntu server配置静态IP
  • ​​​​​​​微软PowerBI PL-300认证考试报名入口及费用
  • 【PTA数据结构 | C语言版】顺序队列的3个操作
  • 完美卸载 Ubuntu 双系统:从规划到实施的完整指南
  • 乐鑫代理商飞睿科技,ESP32模组重塑AIoT体验的四大技术支柱
  • C++类型萃取(Type Traits):深入解析std::enable_if与std::is_same
  • git fetch的使用
  • 【第五章-基础】Python 函数---以一个初学者来理解函数
  • 第十六天,7月10日,八股
  • 【网络安全】利用 Cookie Sandwich 窃取 HttpOnly Cookie
  • vue中token的使用与统计实践