Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

Определение позиции курсора в объекте TEXTAREA

Author wmas wmas | Category Category JavaScript

Здравствуйте, уважаемые читатели моего блога. В этой заметке я хотел бы поделиться с вами кросбраузерной, javascript функцией, которая позволяет определить позицию курсора в строке текста объекта TEXTAREA. А также разобраться с тем: «как работает эта функция?»

Начну с того, что данная функция опробована и корректно работает в браузерах: Firefox 3.0.7, Safari 3.1.2, Google Chrome 1.0.154.53, Internet Explorer 7 и Opera 9.6, под Windows Vista. Как оно в других, сказать затрудняюсь, но вроде бы проблем возникнуть не должно. По своей сути, данная функция является «костылями», которые работают на основе определения позиции выделяемой части текста. Возможно, имеется и другое решение, но мне оно неизвестно.

Так или иначе, для работы и понимания функции нам понадобится объект textarea и кнопка, которая будет вызывать функцию с выводом результата в окне alert().

<textarea cols="40" id="textarea"></textarea>
<input onclick="alert('Position: ' + getCaretPos('textarea'))" type="button" value="Position">

Поясню: позицию курсора возвращает функция getCaretPos(), которой мы передаем идентификатор объекта textarea; это значение выводится в окне alert(), при клики по кнопке (событие onclick).

Теперь код самой функции:

function getCaretPos(objName) {
  var obj = document.getElementById(objName);
  obj.focus();
  if (document.selection) { // IE
    var sel = document.selection.createRange();
    var clone = sel.duplicate();
    sel.collapse(true);
    clone.moveToElementText(obj);
    clone.setEndPoint('EndToEnd', sel);
    return clone.text.length;
  } else if (obj.selectionStart!==false) return obj.selectionStart; // Gecko
  else return 0;
}

Поясню: как уже говорилось выше, функции передается идентификатор объекта textarea, по которому мы получаем переменную obj. Далее мы фокусируемся (focus()) на нашем объекте и приступаем к вычислению позиции курсора.

В случае с Gecko — всё просто. Мы используем свойство selectionStart, которое определяет начальную позицию выделения в объекте. В случае с Internet Explorer пришлось устроить «танцы с бубном»:

  • Cоздаем (TextRange) объект выделенного фрагмента текста (sel), а потом и его дубликат (clone).
  • Используя метод collapse(), производим сжатие объекта TextRange (sel) в точку и помещаем его в начале (true) исходного содержимого объекта.
  • Используя метод moveToElementText(), перемещаем объект TextRange (clone) на фрагмент текста, находящийся в заданном элементе страницы (obj).
  • Используя метод setEndPoint(), устанавливаем границу текущего объекта TextRange (clone) по границе (EndToEnd — конечная с конечной) аналогичного объекта (sel).
  • Остаётся лишь вычислить длину текста полученного объекта TextRange (clone), что и будет текущей позицией курсора.

Проще говоря, по объекту sel вычисляется начальная точка отсчета, а по clone конечная, с дальнейшим «определением» фрагмента текста, длинна которого равна позиции курсора в интересующем нас объекте obj. По крайней мере, так я это себе представляю. Так что не спрашивайте: «почему так, а не иначе, и зачем такой велосипед».

Надеюсь, что данная заметка поможет вам прояснить некоторые детали и справится с поставленной задачей. А возможно, натолкнёт на более изящное решение. В любом случае, спасибо за внимание.

скачать Скачать рабочий пример определения позиции курсора в объекте TEXTAREA

Publish: Пятница Мар 27, 2009

6 Responses for "Определение позиции курсора в объекте TEXTAREA"

feed for comments on this post

  • Комментарий #2298 author: Gamler Reply
    publish: Суббота Май 23, 2009 at 9:13 дп

    Я тебя хочу поздравить!
    код неработает под IE.
    А имеено — поставь два абсолютно независимых текстовых поля(с разными id). И поиграйся.

  • Комментарий #2299 author: wmas Reply
    publish: Среда Май 27, 2009 at 11:25 дп

    2Gamler: не совсем понимаю. Привязка идёт к id так что вроде всё должно работать. Впрочем с IE сложно что-то предугадать. Там вроде как относительная привязка. Не стоит требовать уж слишком многого. Впрочем, если сможешь предложить что-то получше, буду только благодарен ;-)

  • Комментарий #2352 author: guest Reply
    publish: Пятница Июл 17, 2009 at 6:02 пп

    этот, 10-летней давности, пример не работает в IE8 — спотыкается на методе moveToElementText

  • Комментарий #2353 author: wmas Reply
    publish: Пятница Июл 17, 2009 at 7:33 пп

    2guest: hi! я вообще IE не принимаю как браузер, но если есть варианты… подскажите ;-)

  • Комментарий #2354 author: guest Reply
    publish: Пятница Июл 17, 2009 at 10:52 пп

    отличный браузер :mrgreen:
    мне нужно было вставить символ, потому интересовало нахождение позиции курсора; позже наткнулся на это решение webdeveloper.com/forum/showthread.php?t=72414
    оно меня устроило (только для FF поправил малость)
    как вариант:
    если разобраться как работает то возможно удастся выудить оттуда позицию курсора :-)

  • Комментарий #2358 author: wmas Reply
    publish: Понедельник Июл 20, 2009 at 12:41 пп

    2guest: hi! На указанно форуме говорится о вставке в TEXTAREA, а у меня о позиции курсора в нём. В IE8 работает нормально, без проблем. Наверное ты тестил на локали, там надо разрешение выполнять скрипты сделать… может это :roll:


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress