仿豆包智能输入框实现

原创 于 2025-07-10 17:12:43 发布 · 388 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #react.js

基于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 (
        <div
            ref={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 } = props
    const 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);

        // 组装 SVG
        svg.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 = true
        const placeholder = placeholderRef.current;
        if (placeholder) {
            placeholder.style.display = 'none';
        }
        const userInput = userInputRef.current;
        if (userInput) {
            userInput.focus()
        }
    }

    /** 输入区域失焦 */
    const handleBlur = () => {
        isFocusedRef.current = false
        const 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 (
        <div
            ref={contentRef}
            contentEditable={false}
        >
        </div>
    );
});

export default EditableWithTags;

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小凳子在线

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值