如何为textarea字段设置固定默认值 实现类似Fiverr的自动前置文本效果

核心实现逻辑 #

要实现类似Fiverr标题输入的固定前缀效果，需要满足三个核心规则：

• 固定前缀（示例中为I will ）无法被用户删除、修改
• 用户光标无法移动到前缀之前的位置
• 所有用户输入的内容始终追加在固定前缀之后

原生JavaScript实现代码 #

HTML结构 #

<textarea id="serviceTitle" rows="2" cols="50" placeholder="输入你的服务详情..."></textarea>

JS逻辑 #

const textarea = document.querySelector('#serviceTitle');
// 定义固定前缀，末尾加空格优化输入体验
const FIXED_PREFIX = 'I will ';

// 初始化赋值前缀
textarea.value = FIXED_PREFIX;

// 聚焦时自动把光标跳到前缀末尾
textarea.addEventListener('focus', () => {
  const prefixLen = FIXED_PREFIX.length;
  textarea.setSelectionRange(prefixLen, prefixLen);
});

// 拦截输入操作，保证前缀不被修改
textarea.addEventListener('input', () => {
  // 如果当前内容不以前缀开头，强制重置前缀
  if (!textarea.value.startsWith(FIXED_PREFIX)) {
    textarea.value = FIXED_PREFIX + textarea.value.replace(FIXED_PREFIX, '');
    // 光标重置到内容末尾
    const len = textarea.value.length;
    textarea.setSelectionRange(len, len);
  }
});

// 禁止选中前缀区域
textarea.addEventListener('select', () => {
  const prefixLen = FIXED_PREFIX.length;
  if (textarea.selectionStart < prefixLen) {
    textarea.setSelectionRange(prefixLen, Math.max(textarea.selectionEnd, prefixLen));
  }
});

// 处理键盘边界操作
textarea.addEventListener('keydown', (e) => {
  const prefixLen = FIXED_PREFIX.length;
  const cursorPos = textarea.selectionStart;
  // 光标在边界时禁止删除前缀
  if (cursorPos <= prefixLen && (e.key === 'Backspace' || e.key === 'Delete')) {
    e.preventDefault();
  }
  // 光标在边界时禁止向左移动进入前缀区域
  if (cursorPos <= prefixLen && e.key === 'ArrowLeft') {
    e.preventDefault();
  }
});

优化建议 #

• 如果需要固定后缀，逻辑同理，仅需判断字符串是否以指定后缀结尾，拦截对应修改操作即可
• 适配中文/日文等非拼音输入法时，额外监听compositionstart和compositionend事件，避免输入法输入过程中前缀被覆盖
• 表单提交时前后端都做二次校验，确保提交内容包含固定前缀，避免前端规则被用户通过控制台绕过

内容的提问来源于stack exchange，提问作者Muhammad Mazhar Iqbal