Положение курсора, jquery

Question

С этот пост Я нашел и отвечу о том, как расположить курсор в текстовой области.

Я создаю чат jquery, и я хотел создать простую текстовую область HTML, имеющую div перед текстовой областью, отображающей HTML, содержащийся в текстовой области.

Марк разместил следующий скрипт:

$.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();
                }
        });
};

Ведьма работает нормально, но моя проблема в том, как найти конечную позицию в отображаемом там элементе HTML?

Answer 1

Если, показывая HTML, содержащийся в текстовой области, вы подразумеваете, что ваш чат может содержать теги, такие как <img> и <a>, вам нужно экранировать теги. Я предполагаю, что это то, что вы хотите, поэтому попробуйте это:

HTML (для справки)

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

Сценарий

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

* Примечание: вы можете заменить keyup на keydown или keypress, но я считаю, что он лучше работает с keyup.