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

Question

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

第一部分代码来自this 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 元素等)，使其看起来好像某些字符突出显示(或任何您想要的字符)喜欢和他们一起做)。

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

祝你好运。