如何用JavaScript实现input输入框内部分文本的颜色修改效果

原生 <input> 元素的 value 属性仅支持纯文本，无法直接为其中部分字符串设置独立的颜色、背景等样式，你需要用模拟输入框的方案实现需求，两种常用实现思路如下：

方案1：用contenteditable属性的div模拟输入框 #

可编辑div支持插入带样式的DOM节点，可以直接将不符合规则的文本片段用<span>包裹后设置高亮样式，示例代码如下：

基础HTML结构 #

<div 
  id="customInput" 
  contenteditable="true" 
  style="border: 1px solid #d9d9d9; border-radius: 4px; padding: 5px 8px; width: 350px; font-size: 14px;"
></div>

逻辑实现代码 #

const customInput = document.getElementById('customInput');

customInput.addEventListener('input', function() {
  // 先获取纯文本内容，清除旧的样式标签
  const rawContent = this.textContent;
  // 替换为你自己的校验规则，示例为匹配所有非字母的非法字符
  const invalidRule = /([^a-zA-Z]+)/g;
  // 替换非法片段为高亮样式
  const renderContent = rawContent.replace(invalidRule, '<span style="color: #ff4d4f; background: #fff1f0;">$1</span>');
  // 更新内容
  this.innerHTML = renderContent;
  // 重置光标位置到末尾，避免输入时光标跳转
  const range = document.createRange();
  const selection = window.getSelection();
  range.selectNodeContents(this);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
});

注意事项 #

• 输入过程中需要做好XSS过滤，避免用户输入恶意HTML标签触发安全问题
• 如果需要提交表单，可以额外同步内容到隐藏的<input>元素中

方案2：叠层方案兼容原生使用习惯 #

如果必须保留原生<input>的交互特性，可以采用双层结构：

• 下层放置透明的原生<input>，负责接收用户输入
• 上层放置等宽等高的div，同步输入框的内容，把非法片段高亮后渲染在div中
  用户视觉上看到的是上层的高亮内容，实际交互还是操作下层的原生输入框，仅需要做好输入内容、光标位置的同步即可。

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