Как я могу получить позицию каретки в текстовой области, используя jQuery? Я ищу смещение курсора от начала текста, а не позицию (x, y).
Позиция курсора в текстовом поле (индекс символа, а не координаты x/y)
Ответ 1
Не jQuery, а только Javascript...
var position = window.getSelection().getRangeAt(0).startOffset;
Ответ 2
Изменено решение BojanG для работы с jQuery. Протестировано в Chrome, FF и IE.
(function ($, undefined) {
$.fn.getCursorPosition = function() {
var el = $(this).get(0);
var pos = 0;
if('selectionStart' in el) {
pos = el.selectionStart;
} else if('selection' in document) {
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
return pos;
}
})(jQuery);
В принципе, чтобы использовать его в текстовом поле, выполните следующие действия:
$("#myTextBoxSelector").getCursorPosition();
Ответ 3
function caretPos(el)
{
var pos = 0;
// IE Support
if (document.selection)
{
el.focus ();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart ('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
// Firefox support
else if (el.selectionStart || el.selectionStart == '0')
pos = el.selectionStart;
return pos;
}
Ответ 4
Я проделал некоторую работу, используя этот скрытый входной виджет jQuery и нашел, что функция каретки действительно полезна. Я вытащил этот код из приведенного выше плагина.
$.fn.caret = function (begin, end)
{
if (this.length == 0) return;
if (typeof begin == 'number')
{
end = (typeof end == 'number') ? end : begin;
return this.each(function ()
{
if (this.setSelectionRange)
{
this.setSelectionRange(begin, end);
} else if (this.createTextRange)
{
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', begin);
try { range.select(); } catch (ex) { }
}
});
} else
{
if (this[0].setSelectionRange)
{
begin = this[0].selectionStart;
end = this[0].selectionEnd;
} else if (document.selection && document.selection.createRange)
{
var range = document.selection.createRange();
begin = 0 - range.duplicate().moveStart('character', -100000);
end = begin + range.text.length;
}
return { begin: begin, end: end };
}
}
Как только вы создали эту функцию, вы можете выполнять следующие операции. Опять же, эту функцию вытащили из функции ввода маскированного jQuery, упомянутой выше.
$("#id").caret(); //get the begin/end caret position
$("#id").caret().begin;
$("#id").caret().end;
$("#otherId").caret(5); //set the caret position by index
$("#otherId").caret(1, 5); //select a range
Ответ 5
Это работает также в IE9, Firefox и Chrome:
(function ($, undefined) {
$.fn.getCursorPosition = function() {
var el = $(this).get(0);
var pos = 0;
if('selectionStart' in el) {
pos = el.selectionStart;
} else if('selection' in document) {
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
return pos;
}
})(jQuery);
И я думаю, что это намного более чисто, чем версия Ryan
Ответ 6
function doGetCaretPosition(ctrl) {
var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}