Cursor position, jquery

Question

From this post I found and answer on how to position the cursor in a textarea.

I am creating a jquery chat and I wanted to create a simple html textarea, having a div infront of the textarea displying the html contained in the textarea.

Mark posted the following script:

$.fn.selectRange = function(start, end) {

        return this.each(function() {
                if(this.setSelectionRange) {
                        this.focus();
                        this.setSelectionRange(start, end);
                } else if(this.createTextRange) {
                        var range = this.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', end);
                        range.moveStart('character', start);
                        range.select();
                }
        });
};

Witch works fine, but my problem is, how do I find the end position in the div of the html displayed there?

I don't understand the question. "end" is about the TEXTAREA selection, do you understand that? So what do you want to select in the textarea? — Nickolay, Oct 25 '09 at 14:53

score 0 · Answer 1 · answered Oct 26 '09 at 09:56

If by showing the HTML contained in the textarea you mean your chat can contain tags like <img> and <a>, you need to escape the tags. I'm guessing that is what you want, so try this:

HTML (for reference)

<div id="formatted"></div>
<textarea id="textchat"></textarea>

Script

$(document).ready(function(){
 $('#textchat').keyup(function(){
  var txt = $(this).val();
  txt = txt.replace(/</g,'&lt;').replace(/>/g,'&gt;');
  $('#formatted').html(txt);
 })
})

*Note: you could replace keyup with keydown or keypress but I find the it works better with keyup.

Cursor position, jquery

1 Answers1