React中实现单句含多占位符Textarea的技术可行性咨询

原生<textarea>的placeholder属性仅支持设置一段完整文本，无法在同一行内拆分多个可替换的占位符，因此直接用现有原生控件无法实现需求，需要自定义实现，以下是两种可行方案：

方案一：用contenteditable的div模拟Textarea #

通过让div支持contenteditable，可以灵活控制内部的占位符元素，将占位符做成可替换的片段，样式模拟原生占位符的灰色，用户点击或输入时直接替换为真实内容。

示例代码：

import { useState } from 'react';

const MultiPlaceholderTextarea = () => {
  const [inputs, setInputs] = useState({
    username: '',
    deadline: ''
  });

  const updateInput = (field, e) => {
    setInputs(prev => ({ ...prev, [field]: e.target.textContent }));
  };

  return (
    <div 
      className="editable-textarea"
      contentEditable
      style={{
        border: '1px solid #ccc',
        padding: '8px',
        minHeight: '100px',
        borderRadius: '4px',
        fontSize: '14px',
        lineHeight: '1.5'
      }}
    >
      我是{inputs.username || <span style={{color: '#999'}}>姓名占位符</span>}，将在{inputs.deadline || <span style={{color: '#999'}}>截止日期占位符</span>}完成任务。
    </div>
  );
};

export default MultiPlaceholderTextarea;

这种方式的优势是占位符的交互逻辑更直观，但需要自行处理表单提交时的取值、换行格式化等细节。

方案二：原生Textarea叠加占位符层 #

在原生textarea上方放置一个绝对定位的div，内部渲染带占位符的文本，通过pointerEvents: none让点击穿透到textarea，同时根据用户输入内容动态隐藏已填充的占位符。

示例代码：

import { useState, useRef, useEffect } from 'react';

const MultiPlaceholderTextarea = () => {
  const [content, setContent] = useState('');
  const textareaRef = useRef(null);
  const placeholderLayerRef = useRef(null);

  // 同步占位符层与textarea的尺寸和位置
  useEffect(() => {
    if (textareaRef.current && placeholderLayerRef.current) {
      const rect = textareaRef.current.getBoundingClientRect();
      Object.assign(placeholderLayerRef.current.style, {
        width: `${rect.width}px`,
        height: `${rect.height}px`,
        top: `${rect.top}px`,
        left: `${rect.left}px`
      });
    }
  }, []);

  // 根据输入内容生成占位符文本
  const renderPlaceholder = () => {
    const hasUsername = content.includes('姓名');
    const hasDeadline = content.includes('日期');
    return `
      我是${hasUsername ? '' : '<span style="color:#999">姓名占位符</span>'}，将在${hasDeadline ? '' : '<span style="color:#999">截止日期占位符</span>'}完成任务。
    `;
  };

  return (
    <div style={{position: 'relative'}}>
      <textarea
        ref={textareaRef}
        value={content}
        onChange={(e) => setContent(e.target.value)}
        style={{
          width: '100%',
          minHeight: '100px',
          padding: '8px',
          border: '1px solid #ccc',
          borderRadius: '4px',
          fontSize: '14px',
          lineHeight: '1.5',
          resize: 'vertical'
        }}
      />
      <div
        ref={placeholderLayerRef}
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          padding: '8px',
          pointerEvents: 'none',
          fontSize: '14px',
          lineHeight: '1.5',
          color: '#999'
        }}
        dangerouslySetInnerHTML={{__html: renderPlaceholder()}}
      />
    </div>
  );
};

export default MultiPlaceholderTextarea;

这种方案保留了原生textarea的所有特性（比如换行、表单提交、键盘事件等），但占位符的匹配逻辑需要根据实际需求调整，确保占位符在用户输入对应内容后准确隐藏。

内容的提问来源于stack exchange，提问作者404