jQuery Ustaw pozycję kursora w polu tekstowym

Jak ustawić pozycję kursora w polu tekstowym za pomocą jQuery? Mam pole tekstowe z zawartością i chcę, aby kursor użytkowników był ustawiony z pewnym przesunięciem, gdy skupią się na polu. Kod powinien wyglądać mniej więcej tak:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

Jak wyglądałoby wdrożenie tej funkcji setCursorPosition? Jeśli masz pole tekstowe z zawartością abcdefg, to wywołanie spowoduje ustawienie kursora w następujący sposób: abcd ** | ** efg.

Java ma podobną funkcję, setCaretPosition. Czy istnieje podobna metoda dla javascript?

Aktualizacja: zmodyfikowałem kod CMS do pracy z jQuery w następujący sposób:

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

Mam dwie funkcje:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

Następnie możesz użyć setCaretToPos w następujący sposób:

setCaretToPos(document.getElementById("YOURINPUT"), 4);

Przykład na żywo z a textareai an input, pokazujący użycie z jQuery:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  } else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos(input, pos) {
  setSelectionRange(input, pos, pos);
}

$("#set-textarea").click(function() {
  setCaretToPos($("#the-textarea")[0], 10)
});
$("#set-input").click(function() {
  setCaretToPos($("#the-input")[0], 10);
});

<textarea id="the-textarea" cols="40" rows="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<br><input type="button" id="set-textarea" value="Set in textarea">
<br><input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<br><input type="button" id="set-input" value="Set in input">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Od 2016 r. Przetestowane i działające na przeglądarkach Chrome, Firefox, IE11, a nawet IE8 (zobacz to ostatnie tutaj ; Fragmenty stosu nie obsługują IE8).

Oto rozwiązanie jQuery:

$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            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();
        }
    });
};

Dzięki temu możesz to zrobić

$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position

• JsFiddle
• JsBin

Rozwiązania tutaj są słuszne, z wyjątkiem kodu rozszerzenia jQuery.

Funkcja rozszerzenia powinna iterować po każdym wybranym elemencie i powrócić thisdo tworzenia łańcuchów pomocniczych. Oto poprawna wersja:

$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};

Znalazłem rozwiązanie, które działa dla mnie:

$.fn.setCursorPosition = function(position){
    if(this.length == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.length == 0) return this;
    var input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
            return this;
}

Teraz możesz przenieść fokus na koniec dowolnego elementu, wywołując:

$(element).focusEnd();

Lub określasz pozycję.

$(element).setCursorPosition(3); // This will focus on the third character.

Działa to dla mnie w Safari 5 na Mac OSX, jQuery 1.4:

$("Selector")[elementIx].selectionStart = desiredStartPos; 
$("Selector")[elementIx].selectionEnd = desiredEndPos;

Zdaję sobie sprawę, że jest to bardzo stary post, ale pomyślałem, że powinienem zaoferować być może prostsze rozwiązanie, aby zaktualizować go przy użyciu tylko jQuery.

function getTextCursorPosition(ele) {   
    return ele.prop("selectionStart");
}

function setTextCursorPosition(ele,pos) {
    ele.prop("selectionStart", pos + 1);
    ele.prop("selectionEnd", pos + 1);
}

function insertNewLine(text,cursorPos) {
    var firstSlice = text.slice(0,cursorPos);
    var secondSlice = text.slice(cursorPos);

    var new_text = [firstSlice,"\n",secondSlice].join('');

    return new_text;
}

Sposób użycia ctrl-enter w celu dodania nowej linii (jak na Facebooku):

$('textarea').on('keypress',function(e){
    if (e.keyCode == 13 && !e.ctrlKey) {
        e.preventDefault();
        //do something special here with just pressing Enter
    }else if (e.ctrlKey){
        //If the ctrl key was pressed with the Enter key,
        //then enter a new line break into the text
        var cursorPos = getTextCursorPosition($(this));                

        $(this).val(insertNewLine($(this).val(), cursorPos));
        setTextCursorPosition($(this), cursorPos);
    }
});

Jestem otwarty na krytykę. Dziękuję Ci.

AKTUALIZACJA: To rozwiązanie nie pozwala na działanie normalnych funkcji kopiowania i wklejania (tj. Ctrl-c, ctrl-v), więc będę musiał to edytować w przyszłości, aby upewnić się, że ta część znowu działa. Jeśli masz pomysł, jak to zrobić, skomentuj tutaj, a chętnie go przetestuję. Dzięki.

W IE, aby przesunąć kursor na jakąś pozycję, wystarczy ten kod:

var range = elt.createTextRange();
range.move('character', pos);
range.select();

Używam tego: http://plugins.jquery.com/project/jCaret

Czy w ten sposób ustawić fokus, zanim wstawisz tekst do obszaru tekstowego?

$("#comments").focus();
$("#comments").val(comments);

Działa to dla mnie w chrome

$('#input').focus(function() {
    setTimeout( function() {
        document.getElementById('input').selectionStart = 4;
        document.getElementById('input').selectionEnd = 4;
    }, 1);
});

Najwyraźniej potrzebujesz opóźnienia w mikrosekundach lub więcej, ponieważ zwykle użytkownik skupia się na polu tekstowym, klikając dowolną pozycję w polu tekstowym (lub naciskając klawisz Tab), którą chcesz zastąpić, więc musisz poczekać, aż pozycja będzie ustawione przez użytkownika kliknij, a następnie zmień.

Pamiętaj tylko, aby zwracać wartość false zaraz po wywołaniu funkcji, jeśli używasz klawiszy strzałek, ponieważ w przeciwnym razie Chrome przerabia frack.

{
    document.getElementById('moveto3').setSelectionRange(3,3);
    return false;
}

W oparciu o to pytanie odpowiedź nie zadziała idealnie dla ie i opery, gdy w polu tekstowym pojawi się nowa linia. W odpowiedzi wyjaśniono, jak dostosować selectionStart, selectionEnd przed wywołaniem setSelectionRange.

Próbowałem wyregulować opcję z drugiego pytania z rozwiązaniem zaproponowanym przez @AVProgrammer i działa.

function adjustOffset(el, offset) {
    /* From https://stackoverflow.com/a/8928945/611741 */
    var val = el.value, newOffset = offset;
    if (val.indexOf("\r\n") > -1) {
        var matches = val.replace(/\r\n/g, "\n").slice(0, offset).match(/\n/g);
        newOffset += matches ? matches.length : 0;
    }
    return newOffset;
}

$.fn.setCursorPosition = function(position){
    /* From https://stackoverflow.com/a/7180862/611741 */
    if(this.lengh == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    /* From https://stackoverflow.com/a/7180862/611741 
       modified to fit https://stackoverflow.com/a/8928945/611741 */
    if(this.lengh == 0) return this;
    input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        selectionStart = adjustOffset(input, selectionStart);
        selectionEnd = adjustOffset(input, selectionEnd);
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    /* From https://stackoverflow.com/a/7180862/611741 */
    this.setCursorPosition(this.val().length);
}

Mała modyfikacja kodu, którą znalazłem w bitbucket

Kod może teraz wybierać / wyróżniać za pomocą punktów początkowych / końcowych, jeśli otrzyma 2 pozycje. Testowane i działa dobrze w FF / Chrome / IE9 / Opera.

$('#field').caret(1, 9);

Kod jest wymieniony poniżej, zmieniono tylko kilka wierszy:

(function($) {
  $.fn.caret = function(pos) {
    var target = this[0];
    if (arguments.length == 0) { //get
      if (target.selectionStart) { //DOM
        var pos = target.selectionStart;
        return pos > 0 ? pos : 0;
      }
      else if (target.createTextRange) { //IE
        target.focus();
        var range = document.selection.createRange();
        if (range == null)
            return '0';
        var re = target.createTextRange();
        var rc = re.duplicate();
        re.moveToBookmark(range.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
      }
      else return 0;
    }

    //set
    var pos_start = pos;
    var pos_end = pos;

    if (arguments.length > 1) {
        pos_end = arguments[1];
    }

    if (target.setSelectionRange) //DOM
      target.setSelectionRange(pos_start, pos_end);
    else if (target.createTextRange) { //IE
      var range = target.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos_end);
      range.moveStart('character', pos_start);
      range.select();
    }
  }
})(jQuery)

Musiałem sprawić, by działało to w przypadku elementów zadowalających i jQuery, i pomyślałem, że ktoś może chcieć, aby był gotowy do użycia:

$.fn.getCaret = function(n) {
    var d = $(this)[0];
    var s, r;
    r = document.createRange();
    r.selectNodeContents(d);
    s = window.getSelection();
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return s.anchorOffset;
};

$.fn.setCaret = function(n) {
    var d = $(this)[0];
    d.focus();
    var r = document.createRange();
    var s = window.getSelection();
    r.setStart(d.childNodes[0], n);
    r.collapse(true);
    s.removeAllRanges();
    s.addRange(r);
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return this;
};

Użycie $(selector).getCaret()zwraca przesunięcie liczby i $(selector).setCaret(num)ustanawia przesunięcie i ustawia fokus na elemencie.

Również mała wskazówka, jeśli uruchomisz $(selector).setCaret(num)z konsoli, zwróci plik console.log, ale nie zwizualizujesz fokusa, ponieważ jest on ustalany w oknie konsoli.

Bests; D

Możesz bezpośrednio zmienić prototyp, jeśli setSelectionRange nie istnieje.

(function() {
    if (!HTMLInputElement.prototype.setSelectionRange) {
        HTMLInputElement.prototype.setSelectionRange = function(start, end) {
            if (this.createTextRange) {
                var range = this.createTextRange();
                this.collapse(true);
                this.moveEnd('character', end);
                this.moveStart('character', start);
                this.select();
            }
        }
    }
})();
document.getElementById("input_tag").setSelectionRange(6, 7);

Link do jsFiddle