javascript - 是否可以在输入时用 <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;
});