2

I have a page textbox that a user can type in. As the user types, I want to highlight sections of text. To keep things simple, I'm just trying to highlight all vowels at the moment.

The first part of the code is from 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;
});

From which I can then write 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();

This code highlights vowels as the user types. However, in doing so, the focus on the field is lost every time the highlighting updates, and the user must click again to type another character.

How can I fix this?

Community
  • 1
  • 1
Eric
  • 95,302
  • 53
  • 242
  • 374
  • try adding $('#this').focus(); after message update to keep the focus on. – Jonas m Oct 31 '11 at 21:33
  • You mean `$(this).focus()`? I tried that to begin with, but it didn't work. – Eric Oct 31 '11 at 21:35
  • Sorry yeah, late night here lol. Sounds weird. Sorry, no good explanation from me then. Hope youll find the answer. :) – Jonas m Oct 31 '11 at 21:36
  • I can tell you why it is happening, but I can't think of a solution. Basically, you are replacing the text inside of the content editable element. That includes any selected text as well as text around the current insertion point. After using `.html`, the browser doesn't know where the insertion point or focus should be because the element that had focus no longer exists as it did previously. – Kevin B Oct 31 '11 at 21:42
  • @Kevin: Can I insert text without clearing then replacing? – Eric Oct 31 '11 at 21:43
  • If you were working with elements, yes, however you are working with characters in a string, therefore I would have to go with no. To manipulate text, you have to change the text and re-insert it resulting in loss of insertion point. What are you actually using this for? It almost sounds like you are trying to combine a preview pane with an edit pane. – Kevin B Oct 31 '11 at 21:53
  • @KevinB: It's a find-as-you-type application. I have some rule, that may or may not be a regex, that will be applied to text, and should highlight matches for the user – Eric Oct 31 '11 at 22:00

1 Answers1

0

I'm pretty sure that you can't do this without generating an imitation field.

You could use HTML to generate an HTML element that looks like an input field. Then when that element has focus you can capture key strokes. You'll have to track special non-character keys like backspace, tab, etc and deal with those individually. Whatever the user types can be stored into a real form field (or just a JavaScript variable if you choose).

The imitation field would then read the actual values (stored in the form field or JS variable) and render it (with CSS, DOM elements, etc) to make it appear as if certain characters are highlighted (or whatever you'd like to do with them).

I don't know of any other way you could accomplish what you are trying to do.

Good luck.

James
  • 3,051
  • 3
  • 29
  • 41