jQuery Cursorposition im Textbereich festlegen

Wie setzen Sie die Cursorposition in einem Textfeld mit jQuery? Ich habe ein Textfeld mit Inhalt und möchte, dass der Benutzercursor an einem bestimmten Versatz positioniert wird, wenn er sich auf das Feld konzentriert. Der Code sollte ungefähr so ​​aussehen:

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

Wie würde die Implementierung dieser setCursorPosition-Funktion aussehen? Wenn Sie ein Textfeld mit dem Inhalt abcdefg hätten, würde dieser Aufruf dazu führen, dass der Cursor wie folgt positioniert wird: abcd ** | ** efg.

Java hat eine ähnliche Funktion, setCaretPosition. Gibt es eine ähnliche Methode für Javascript?

Update: Ich habe den CMS-Code so geändert, dass er mit jQuery funktioniert:

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);

Ich habe zwei Funktionen:

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);
}

Dann können Sie setCaretToPos wie folgt verwenden:

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

Live-Beispiel mit a textareaund an input, das die Verwendung von jQuery zeigt:

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>

Ab 2016 getestet und mit Chrome, Firefox, IE11 und sogar IE8 (siehe das letzte hier ; Stack-Snippets unterstützen IE8 nicht).

Hier ist eine jQuery-Lösung:

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

Damit können Sie tun

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

• JsFiddle
• JsBin

Die Lösungen hier sind bis auf den jQuery-Erweiterungscode richtig.

Die Erweiterungsfunktion sollte über jedes ausgewählte Element iterieren und thiszur Unterstützung der Verkettung zurückkehren. Hier ist die eine korrekte Version:

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

Ich habe eine Lösung gefunden, die für mich funktioniert:

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

Jetzt können Sie den Fokus an das Ende eines Elements verschieben, indem Sie Folgendes aufrufen:

$(element).focusEnd();

Oder Sie geben die Position an.

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

Dies funktionierte für mich unter Safari 5 unter Mac OS X, jQuery 1.4:

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

Mir ist klar, dass dies ein sehr alter Beitrag ist, aber ich dachte, ich sollte vielleicht eine einfachere Lösung anbieten, um ihn nur mit jQuery zu aktualisieren.

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;
}

Verwendung für die Verwendung von Strg-Enter zum Hinzufügen einer neuen Zeile (wie bei Facebook):

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

Ich bin offen für Kritik. Vielen Dank.

UPDATE: Diese Lösung ermöglicht nicht, dass normale Kopier- und Einfügefunktionen funktionieren (z. B. Strg-C, Strg-V). Daher muss ich diese in Zukunft bearbeiten, um sicherzustellen, dass der Teil wieder funktioniert. Wenn Sie eine Idee dazu haben, kommentieren Sie diese bitte hier, und ich werde sie gerne testen. Vielen Dank.

Im IE reicht dieser Code aus, um den Cursor an eine Position zu bewegen:

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

Ich benutze dies: http://plugins.jquery.com/project/jCaret

Stellen Sie den Fokus ein, bevor Sie den Text in den Textbereich eingefügt haben.

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

Das funktioniert bei mir in Chrom

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

Anscheinend benötigen Sie eine Verzögerung von einer Mikrosekunde oder mehr, da sich ein Benutzer normalerweise auf das Textfeld konzentriert, indem er auf eine Position im Textfeld klickt (oder auf die Registerkarte drückt), die Sie überschreiben möchten. Sie müssen also warten, bis die Position erreicht ist vom Benutzer festgelegt klicken und dann ändern.

Denken Sie daran, direkt nach dem Funktionsaufruf false zurückzugeben, wenn Sie die Pfeiltasten verwenden, da Chrome den Frack ansonsten auffrischt.

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

Basierend auf dieser Frage funktioniert die Antwort nicht perfekt für dh und Oper, wenn es eine neue Zeile im Textbereich gibt. In der Antwort wird erläutert, wie Sie selectionStart, selectionEnd anpassen, bevor Sie setSelectionRange aufrufen.

Ich habe das adjustOffset aus der anderen Frage mit der von @AVProgrammer vorgeschlagenen Lösung ausprobiert und es funktioniert.

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);
}

Kleine Änderung am Code, den ich in Bitbucket gefunden habe

Code kann jetzt mit Start- / Endpunkten auswählen / hervorheben, wenn 2 Positionen angegeben sind. Getestet und funktioniert gut in FF / Chrome / IE9 / Opera.

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

Der Code ist unten aufgeführt, nur wenige Zeilen geändert:

(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)

Ich musste dies für inhaltsbearbeitbare Elemente und jQuery zum Laufen bringen und dachte, jemand möchte, dass es einsatzbereit ist:

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

Die Verwendung $(selector).getCaret()gibt den $(selector).setCaret(num)Zahlenversatz zurück, legt den Versatz fest und legt den Fokus auf das Element.

Auch ein kleiner Tipp: Wenn Sie $(selector).setCaret(num)von der Konsole aus ausführen , wird das console.log zurückgegeben, aber Sie werden den Fokus nicht visualisieren, da er im Konsolenfenster eingerichtet ist.

Bests; D.

Sie können den Prototyp direkt ändern, wenn setSelectionRange nicht vorhanden ist.

(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);

jsFiddle Link