textarea局部编辑：点击时光标定位指定位置并禁止编辑占位符与引号

这个需求挺实用的，要让用户只能编辑引号中间的内容，同时点击时自动把光标落到正确位置。我给你一套完整的实现方案，一步步来：

核心思路 #

我们要搞定两件关键事：

• 点击textarea时，自动把光标定位到Name ""的两个引号中间
• 禁止用户修改Name 和前后的引号，只允许编辑引号内的内容

具体实现代码 #

HTML部分 #

先给textarea加个唯一ID，方便后续JS操作：

<textarea id="nameTextarea" rows="1" cols="20">Name ""</textarea>

JavaScript部分 #

const textarea = document.getElementById('nameTextarea');
const fixedPrefix = 'Name "'; // 固定前缀内容
const fixedSuffix = '"';      // 固定后缀内容

// 页面加载时先确保textarea内容是我们要的格式
textarea.value = `${fixedPrefix}${fixedSuffix}`;

// 点击textarea时自动定位光标到引号中间
textarea.addEventListener('click', () => {
  // 光标位置刚好是前缀的长度，也就是第一个引号后面的位置
  const targetPos = fixedPrefix.length;
  textarea.setSelectionRange(targetPos, targetPos);
});

// 监听输入事件，强制锁定固定内容
textarea.addEventListener('input', () => {
  // 提取用户输入的有效内容：去掉前缀和后缀
  let userContent = textarea.value.replace(fixedPrefix, '').replace(fixedSuffix, '');
  // 过滤掉用户输入的引号，避免破坏整体结构
  userContent = userContent.replace(/"/g, '');
  // 重新拼接成固定格式的内容
  textarea.value = `${fixedPrefix}${userContent}${fixedSuffix}`;
  // 重新定位光标到输入内容的末尾
  const newCursorPos = fixedPrefix.length + userContent.length;
  textarea.setSelectionRange(newCursorPos, newCursorPos);
});

// 拦截键盘操作，防止删除固定内容
textarea.addEventListener('keydown', (e) => {
  const currentCursorPos = textarea.selectionStart;
  // 如果光标在前缀范围内，禁止退格和删除键
  if (currentCursorPos <= fixedPrefix.length && (e.key === 'Backspace' || e.key === 'Delete')) {
    e.preventDefault();
  }
  // 如果光标在后缀位置，禁止删除键
  if (currentCursorPos === textarea.value.length - fixedSuffix.length && e.key === 'Delete') {
    e.preventDefault();
  }
});

代码细节说明 #

• 光标自动定位：点击事件里直接把光标设到前缀的长度位置，刚好落在两个引号中间，用户不用手动调整。
• 输入内容过滤：每次用户输入后，我们会自动提取中间的有效内容，过滤掉引号避免结构混乱，再重新拼接成固定格式，确保Name 和引号不会被修改。
• 键盘操作拦截：拦截了在固定区域的退格和删除操作，防止用户不小心删掉前缀或后缀，进一步保障固定内容的完整性。

这样处理后，用户点击textarea时光标会自动落到引号中间，而且只能编辑中间的内容，完全碰不到固定的Name 和引号～

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