如何在用户键入时突出显示文本部分？

Question

我有一个用户可以输入的页面文本框。当用户输入时，我想突出显示文本部分。为了简单起见，我现在只是想突出显示所有元音。

代码的第一部分来自这个问题：

$('[contenteditable]').live('focus', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    return $this;
}).live('blur keyup paste', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
    return $this;
});

然后我可以从中编写this：

var magicRegex = /[aeiou]/gi;

$('#message').change(function() {
    $(this).find('br').replaceWith('\n');
    var message = $(this).text();

    message = message.replace(magicRegex , '<mark>$&</mark>');

    message = message.replace(/\n/gi, '<br />');
    $(this).html(message);
}).change();

此代码在用户键入时突出显示元音。然而，这样做时，每次突出显示更新时，该字段的焦点都会丢失，并且用户必须再次单击才能键入另一个字符。

我该如何解决这个问题？

Answer 1

我很确定如果不生成模仿场就无法做到这一点。

您可以使用 HTML 生成看起来像输入字段的 HTML 元素。然后，当该元素获得焦点时，您可以捕获击键。您必须跟踪特殊的非字符键，例如退格键、制表符等，并单独处理它们。无论用户输入什么内容，都可以存储到真实的表单字段中（或者如果您选择，也可以存储到 JavaScript 变量中）。

然后，模仿字段将读取实际值（存储在表单字段或 JS 变量中）并渲染它（使用 CSS、DOM 元素等），使其看起来好像某些字符突出显示（或任何您想要做的事情）与他们）。

我不知道还有什么其他方法可以完成你想要做的事情。

祝你好运。