如何为input输入框内输入的+、-符号设置独立CSS样式

实现结论 #

• 该需求可通过CSS + JavaScript完美实现，不需要复杂正则表达式
• 原思路不可行的原因是::first-letter伪类仅适用于块级可替换元素的文本节点，不支持input输入框的value内容

实现思路 #

因为原生input的value是统一渲染的文本，无法单独给部分字符设置样式，我们采用输入层 + 渲染层分离的方案：

1. 保留原生input作为输入层，设置为透明，保留所有输入、光标、焦点、表单提交的原生能力
2. 下方放置一个和input样式完全一致的div作为渲染层，负责渲染带颜色的格式化文本
3. 监听input输入事件，实时同步内容到渲染层，对首字符做简单的颜色判断处理即可

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>输入符号变色实现</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .input-wrapper {
      position: relative;
      font-size: 100px;
    }
    .input-render {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      /* 和input的样式完全对齐 */
      border: 1px solid #ccc;
      line-height: 1.2;
      padding: 4px 8px;
    }
    .sign-plus {
      color: green;
    }
    .sign-minus {
      color: red;
    }
    input {
      position: relative;
      z-index: 1;
      font-size: 100px;
      border: 1px solid #ccc;
      padding: 4px 8px;
      /* 文字透明，只显示光标 */
      color: transparent;
      caret-color: #000;
      background: transparent;
    }
  </style>
</head>
<body>
  <div class="input-wrapper">
    <div class="input-render" id="inputRender"></div>
    <input type="text" id="numInput" />
  </div>

  <script>
    const numInput = document.getElementById('numInput')
    const inputRender = document.getElementById('inputRender')

    numInput.addEventListener('input', () => {
      const value = numInput.value
      if (!value) {
        inputRender.innerText = ''
        return
      }
      // 不需要复杂正则，直接判断首字符即可
      const firstChar = value[0]
      const restStr = value.slice(1)
      let renderHtml = ''
      if (firstChar === '+') {
        renderHtml = `<span class="sign-plus">+</span>${restStr}`
      } else if (firstChar === '-') {
        renderHtml = `<span class="sign-minus">-</span>${restStr}`
      } else {
        renderHtml = value
      }
      inputRender.innerHTML = renderHtml
    })
  </script>
</body>
</html>

方案说明 #

• 整个逻辑只需要做首字符判断，不需要复杂正则，性能消耗极低
• 原生input保留了所有默认行为，包括输入法输入、光标移动、快捷键操作、表单提交等，没有兼容问题
• 如果你不想用重叠方案，也可以直接用contenteditable="true"的div代替input，直接在div内做内容格式化，但需要额外处理表单提交时的取值逻辑，以及避免用户输入富文本的问题，综合成本高于重叠方案

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