JavaScript中.fontcolor()方法的替代方案及多色输出实现问询

云上老周

2026-5-28

解决readonly输入框内多段文本不同颜色的问题

首先得明确：普通的<input>元素无法渲染富文本（比如不同颜色的文本片段），它只能显示纯文本。不过我们可以做最小改动来实现需求，完全保留你现有代码的核心逻辑：

步骤1：替换输入框为可渲染富文本的容器

把原来的<input>换成一个模拟输入框样式的<div>，这样就能支持HTML富文本了：

<div class="wide">
  <p>
    <!-- 用div模拟input，设置contenteditable和readonly -->
    <div class="wide input-like" id="out" contenteditable="true" onfocus="this.select();" readonly></div>
  </p>
</div>

然后添加一点CSS来让这个div看起来和原生input一样：

.input-like {
  border: 1px solid #ccc;
  padding: 4px 6px;
  border-radius: 4px;
  background-color: #fff;
  color: red; /* 整体文本默认红色 */
  min-height: 1.5em; /* 保证和input高度一致 */
}
.input-like[readonly] {
  background-color: #f5f5f5; /* 只读状态的灰色背景 */
  cursor: default;
}

步骤2：修改`parseOutput`函数的拼接逻辑

只需要把原来的纯文本拼接改成带颜色样式的HTML片段，核心判断逻辑完全不动：

function parseOutput(){
  var output = "";
  // 给select1和select2的内容分别加上带颜色的span标签
  const select1Text = `<span style="color: blue;">${select1.value}</span>`;
  const select2Text = `<span style="color: black;">${select2.value}</span>`;
  
  // 原有逻辑完全保留，只是替换成带样式的文本
  if (select1.value.length > 0 && select0.value !== "[Costco Website Name]"){
    output = output + ' - ' + select1Text + ' // ' + select2Text;
  } else{
    output = output + select1Text + ' // ' + select2Text;
  }
  // 把原来的out.value改成out.innerHTML，因为现在是div容器
  out.innerHTML = output.trim();
}