在键入时用 <span>[character]</span> 替换某些字符是否可能/可行？

Question

我想拥有它，这样每当用户在搜索表单中输入“#”时，“#”就会被设置为特定颜色。

我认为这样做的唯一方法是用 <span class="colorHash"></span> 替换该字符的每个实例，然后使用 css 将颜色应用于类。

这可能吗？谁能指出我正确的方向？

Answer 1

一种解决方案是在实际输入上放置一个模仿文本输入的元素，该元素看起来尽可能像一个文本输入。每次输入更改时都会更新此模拟，并包含颜色更改的哈希值。它没有指针事件，因此点击它可以让用户与底层的真实输入进行交互。

Here 是一个参考实现。它绝不是完美的，我不建议从中复制代码。

好东西：

• 输入数据原封不动地存储在 <input> 元素中，因此适用于表单。

坏事：

• 显示的不是实际的<input> 元素，而是模拟。这会导致没有光标（坏），并可能导致其他问题。这意味着input[type=text] 上的所有样式也应该在模仿上。
• 轻微的输入延迟。

---

一个稍微不同的方法是让模仿者不可见，除了红色哈希。

Here 是一个参考实现。它绝不是完美的，我不建议从中复制代码。

好东西：

• 消除输入延迟
• 光标可见
• 用户看到真正的输入元素（在我的书中很好）

坏事：

• 红色滞后（在使用 jQuery 版本的代码时最明显）
• 可能更难维护。模拟必须以像素完美的方式放置在真实输入之上。

由于这似乎更接近您要查找的内容，因此我将在此处包含此版本的代码...

此代码绝不是完美的，我不建议从中复制代码。

<div id="wrapper">
    <input type="text" id="data-input">
    <pre class="text-input-mimic" id="shown-data"></pre>
</div>

#wrapper { position: relative; }
#shown-data {
    /* Stacked in top-left corner */
    position: absolute;
    top: 0;
    left: 0;
    /* Clicking and typing goes through to real input */
    pointer-events: none;
}
.text-input-mimic, input[type=text] {
    border: 1px solid grey;
    width: 250px;
    height: 20px;
    padding: 5px;
    display: inline-block;
    margin: 0;
    font-family: Calibri !important;
    font-size: 16px !important;
}
.text-input-mimic {
    /* Make invisible except for hashes */
    background: none !important;
    border: none !important;
    color: rgba(0, 0, 0, 0);
    /* Pixel-perfect adjustments */
    padding-top: 7px;
    padding-left: 6px;
}
.colored { color: red !important; }

JS (jQ)：

$('#data-input').on("change keyup paste", function() {
    let inp = $('#data-input').val();
    let modified = inp.replace(/#/g, '<span class="colored">#</span>');
    $('#shown-data').html(modified);
});

或者，JS（普通）：

real  = document.getElementById('data-input');
mimic = document.getElementById('shown-data');

real.addEventListener('input', function() {
    let inputVal = real.value;
    let modified = inputVal.replace(/#/g, '<span class="colored">#</span>');
    mimic.innerHTML = modified;
});