如何为HTML输入框文本添加删除线样式（标记/删除文本）

一、全局给输入框文本添加删除线（简单场景） #

如果只需要输入框内所有文本都显示删除线，直接用CSS的text-decoration属性就能快速实现，无需JavaScript：

<input type="text" placeholder="输入内容试试" style="text-decoration: line-through;" />

也可以将样式抽离到CSS类中复用：

.strikethrough-input {
  text-decoration: line-through;
  border: 1px solid #ccc;
  padding: 8px;
}

<input type="text" class="strikethrough-input" placeholder="输入内容试试" />

二、动态给输入内容添加HTML删除线标签（支持复杂场景） #

原生<input>标签不支持渲染内部HTML，所以如果需要让输入的内容自动被<del>标签包裹，得用contenteditable属性的<div>模拟输入框：

方法1：实时将输入内容用<del>包裹 #

<div contenteditable="true" class="editable-input" placeholder="输入内容试试"></div>

<style>
.editable-input {
  border: 1px solid #ccc;
  padding: 8px;
  width: 300px;
  min-height: 24px;
  border-radius: 4px;
}
/* 模拟原生input的placeholder效果 */
.editable-input:empty:before {
  content: attr(placeholder);
  color: #999;
}
</style>

<script>
const editableDiv = document.querySelector('.editable-input');
editableDiv.addEventListener('input', function() {
  // 先移除已有的del标签，避免重复嵌套
  const plainText = this.textContent;
  this.innerHTML = `<del>${plainText}</del>`;
  
  // 自动将光标移到内容末尾，保证输入流畅
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(this.lastChild);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
});
</script>

方法2：手动切换删除线样式（按需控制） #

如果不需要自动给所有内容加删除线，而是允许用户手动切换，可以搭配按钮实现：

<button id="toggle-strike">切换删除线</button>
<div contenteditable="true" class="editable-input" placeholder="输入内容试试"></div>

<style>
.editable-input {
  border: 1px solid #ccc;
  padding: 8px;
  width: 300px;
  min-height: 24px;
  border-radius: 4px;
  margin-top: 8px;
}
.editable-input:empty:before {
  content: attr(placeholder);
  color: #999;
}
.strikethrough {
  text-decoration: line-through;
}
</style>

<script>
const toggleBtn = document.getElementById('toggle-strike');
const editableDiv = document.querySelector('.editable-input');

toggleBtn.addEventListener('click', () => {
  editableDiv.classList.toggle('strikethrough');
});
</script>

内容的提问来源于stack exchange，提问作者JN Jony Hossain