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

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

代码的第一部分是从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();

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

我该如何解决这个问题？

来源

2011-10-31 Eric

尝试添加$（'＃this'）。focus（）;消息更新后保持重点。 –

你的意思是'$（this）.focus（）'？我试过这一开始，但它没有奏效。 – Eric

对不起，深夜在这里哈哈。听起来怪怪的。对不起，我没有好的解释。希望你能找到答案。 :) –

我非常确定，如果不生成模仿字段，您无法做到这一点。

您可以使用HTML生成一个看起来像输入字段的HTML元素。然后，当该元素具有焦点时，您可以捕捉击键。您必须跟踪特殊的非字符键，如退格键，选项卡等，并分别处理这些键。无论用户类型如何，都可以存储到真正的表单字段中（或者如果您选择，则只是一个JavaScript变量）。然后，模拟字段将读取实际值（存储在表单字段或JS变量中）并呈现它（使用CSS，DOM元素等），使其看起来好像突出显示某些字符（或任何“ d喜欢和他们一起做）。

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

祝你好运。

来源

2011-10-31 22:37:36 James

请注意，目前我没有使用输入字段。 – Eric

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

回答

相关问题