如何禁止用户删除HTML input输入框中的内容？

要实现只能输入新内容、完全禁止删除或修改已有内容的输入框，核心思路是强制内容只增不减，同时拦截所有可能导致内容缩减或覆盖的操作，下面是具体实现方案：

完整代码示例 #

<input type="text" id="fixedInput" placeholder="仅可追加输入，无法删除/修改已有内容">

<script>
const input = document.getElementById('fixedInput');
let currentValidValue = '';

// 每次获得焦点时，同步当前有效值
input.addEventListener('focus', () => {
  currentValidValue = input.value;
});

// 核心：监听输入变化，确保内容只能追加
input.addEventListener('input', (e) => {
  const newValue = e.target.value;
  // 校验规则：新内容长度不能小于有效值，且有效值必须是新内容的前缀（防止覆盖前面内容）
  if (newValue.length < currentValidValue.length || !newValue.startsWith(currentValidValue)) {
    // 不符合规则则回滚到有效值
    e.target.value = currentValidValue;
  } else {
    // 符合规则则更新有效值
    currentValidValue = newValue;
  }
});

// 拦截剪切操作
input.addEventListener('cut', (e) => {
  e.preventDefault();
});

// 禁用右键菜单（防止通过右键删除/剪切）
input.addEventListener('contextmenu', (e) => {
  e.preventDefault();
});

// 补充拦截删除类按键（提升体验，提前阻止无效操作）
input.addEventListener('keydown', (e) => {
  const forbiddenKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
  // 同时拦截Ctrl+X剪切
  if (forbiddenKeys.includes(e.key) || (e.ctrlKey && e.key === 'x')) {
    e.preventDefault();
  }
});
</script>

逻辑说明 #

1. input事件兜底：这是最关键的一环，不管用户通过键盘输入、粘贴、鼠标选中覆盖哪种方式修改内容，都会触发input事件。通过校验新内容是否是原有内容的前缀扩展，确保只能在已有内容后面追加新字符，一旦不符合规则就回滚到之前的有效值。
2. 焦点同步有效值：每次输入框获得焦点时，更新有效值为当前内容，避免页面加载后首次输入或切换焦点后出现校验异常。
3. 拦截剪切与右键菜单：直接禁止剪切操作，同时禁用右键菜单，从操作入口阻止删除类行为。
4. 按键拦截补充：提前拦截Backspace、Delete等删除类按键，以及方向键（防止用户移动光标到前面修改），减少无效操作的触发，提升用户体验。

这种方案比单纯监听键盘按键更可靠，因为它覆盖了所有可能修改内容的操作场景，和React中通过state控制值的思路本质一致——都是强制保持内容的单向增长。

内容的提问来源于stack exchange，提问作者Islam Y-