如何实现可输入但禁止删除内容的纯JavaScript文本输入框

当然可行！要实现一个允许输入新内容但禁止删除已有文本的<input type="text">，核心思路是监听键盘事件，阻止Backspace和Delete键的默认行为，还可以补充处理右键菜单的剪切/删除操作来提升限制的严谨性。

以下是纯HTML+JavaScript的实现方案：

基础实现（阻止Backspace/Delete键） #

<input type="text" id="noDeleteInput" placeholder="输入内容后无法删除">

<script>
const input = document.getElementById('noDeleteInput');

input.addEventListener('keydown', function(e) {
    // 阻止Backspace(键码8)和Delete(键码46)的默认删除行为
    if (e.keyCode === 8 || e.keyCode === 46) {
        e.preventDefault();
    }
});
</script>

进阶补充（阻止右键剪切/删除） #

如果要防止用户通过右键菜单的剪切、删除操作修改内容，可以额外监听cut和contextmenu事件：

// 阻止剪切操作
input.addEventListener('cut', function(e) {
    e.preventDefault();
});

// 可选：禁用右键菜单（如果需要完全限制右键相关的修改操作）
input.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});

补充说明 #

• 上面的代码只阻止了主动删除的操作，用户仍然可以正常输入新字符、粘贴内容（如果需要限制粘贴，也可以监听paste事件并阻止默认行为）。
• 如果你需要更精细的控制（比如允许删除刚输入的内容但不能删除预设的固定文本），可以结合onchange事件或者实时对比输入框内容与初始固定文本，来判断是否允许删除操作，但这需要额外的逻辑处理。

感谢社区里各位用户的思路启发！尤其是@Isacc、@ARN、@Kavian_K、@user3210641和@Arun Bhat的贡献，帮助完善了这个解决方案的各个细节。

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