如何让input元素的value属性值无法被清除？

一、CSS视觉方案（仅视觉固定，不修改输入值） #

这种方式是把“Friend”做成输入框的固定前缀，用户无法选中或修改该部分，但输入框的实际值不包含这个前缀，需要后续业务逻辑自行拼接前缀和用户输入内容。

代码实现 #

<div class="input-wrapper">
  <span class="fixed-prefix">Friend</span>
  <input type="text" class="user-input" placeholder="补充内容">
</div>

<style>
.input-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 8px;
  background: #fff;
}
.fixed-prefix {
  color: #666;
  user-select: none; /* 禁止选中复制 */
  margin-right: 8px;
  cursor: default;
}
.user-input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
}
</style>

二、JavaScript方案（强制保留前缀，实际值包含“Friend”） #

通过监听输入事件和按键事件，确保输入框内容始终以“Friend”开头，用户无法删除或修改该前缀。

代码实现 #

<input type="text" id="fixed-input" value="Friend">

<script>
const input = document.getElementById('fixed-input');
const fixedPrefix = 'Friend';

// 处理输入（包括粘贴、删除等操作）
input.addEventListener('input', () => {
  if (!input.value.startsWith(fixedPrefix)) {
    // 恢复前缀，保留用户输入的有效内容
    input.value = fixedPrefix + input.value.replace(fixedPrefix, '');
  }
  // 将光标定位到前缀之后
  input.setSelectionRange(fixedPrefix.length, input.value.length);
});

// 阻止在前缀范围内的删除/退格操作
input.addEventListener('keydown', (e) => {
  const isDeleteKey = e.key === 'Backspace' || e.key === 'Delete';
  const cursorInPrefix = input.selectionStart <= fixedPrefix.length;
  if (isDeleteKey && cursorInPrefix) {
    e.preventDefault();
  }
});
</script>

注意事项 #

• 该方案会强制输入值以“Friend”开头，包括用户粘贴内容时，会自动补全前缀。
• 光标会被限制在前缀之后，避免用户误删前缀。

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