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元素等），使其看起来好像某些字符突出显示（或者不管你是什么字符）和他们一样）。

我不知道你能以什么其他方式完成你想要做的事情。

祝你好运。

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

1 个答案: