Question

我想拥有它，以便每当用户键入＆＃39;＃＆＃39;在搜索表单中，＆＃39;＃＆＃39;是一种特定的颜色。

我认为执行此操作的唯一方法是用<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;
});

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

1 个答案: