Bewegen Sie die Cursorposition mit Javascript?

Ich bin auf der Suche bewegen Sie den Cursor genau vier Leerzeichen vor seiner aktuellen position, so dass ich legen Sie eine Registerkarte richtig. Ich hab schon die HTML einfügen an der Cursor-position arbeiten, aber wenn ich legen Sie die HTML -, die Einfügemarke wird hinter sich gelassen. Ich habe in den letzten Stunden oder so suchen verschiedene Möglichkeiten, dies zu tun und ich habe versucht, viele von Ihnen, aber ich kann Sie nicht alle von Ihnen arbeiten für mich. Hier ist die jüngste Methode, die ich versucht habe:

function moveCaret(input, distance) {
    if(input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(distance, distance);
    } else if(input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd(distance);
        range.moveStart(distance);
        range.select();
    }
}

Es bringt absolut nichts-auch nicht, bewegen Sie den Cursor, werfen Sie irgendwelche Fehler oder etwas. Das hinterlässt mich ratlos. Und ja, ich weiß, dass die oben genannten Methode stellen (soll) stellen Sie den Cursor an eine bestimmte Stelle vom Anfang des angegebenen Knotens ( input ), aber auch das funktioniert nicht. Also, was genau mache ich falsch und wie kann ich es richtig machen?

Edit: Basiert Sie auf die links, o.v. vorausgesetzt, ich habe es geschafft, etwas zusammen Schustern, dass endlich etwas zu tun: werfen ist ein Fehler. Yay! Hier der neue code:

this.moveCaret = function(distance) {
    if(that.win.getSelection) {
        var range = that.win.getSelection().getRangeAt(0);
        range.setStart(range.startOffset + distance);
    } else if (that.win.document.selection) {
        var range = that.win.document.selection.createRange();
        range.setStart(range.startOffset + distance);
    }
}

Nun, das gibt den Fehler Uncaught Error: NOT_FOUND_ERR: DOM Exception 8. Irgendwelche Ideen, warum?

  • Haben Sie versucht, die Einstellung der element.selectionStart und element.selectionEnd? Es sollte funktionieren, cross-browser für die Eingabe und Texteingabefelder soweit ich mich erinnere.
  • Ich vermied es, weil ich glaube, dass es nicht die Arbeit, die in früheren Versionen des IE8. Ich werde schauen es trotzdem, obwohl.
  • Der einzige IE-version Teste ich mit dem IE9, viel Glück obwohl. 🙂
  • Ja, es scheint selectionStart funktioniert nicht in früheren Versionen des IE, aber danke trotzdem. =)
  • Mögliche Duplikate von: stackoverflow.com/questions/1181700/... Dieser und dieser Antwort angezeigt zu haben, erhielt viel Anerkennung.
  • äääh, was ist that beziehen Ihr Bearbeiten? Ich sehe es nicht zugewiesen wird
  • Oh, tut mir Leid. that ist eine Referenz auf ein Objekt, das eine window - Objekt enthält. win ist entweder ein geöffnetes Fenster oder die standard-Fenster.
  • Die DOM-Fehler ist wahrscheinlich, wenn der neue offset-existiert nicht ("nach dem Ende des Elements). Beachten Sie auch, dass start-offset bezieht sich auf die Anzahl von Zeichen, die den Beginn des Knotens, falls die Auswahl eine text-Knoten, aber die Anzahl der Knoten vom Anfang, wenn der Knoten ein element (verwirrend ich weiß). Ich könnte versuchen, und schreiben eine Antwort auf diese, aber es ist eine ziemlich schwierige Aufgabe zu erreichen, vor allem, wenn Sie wollen, um Fälle mit formatierten text (z.B. <b> - tags, etc), als auch nur plain text.
  • der Blick durch die anderen Antworten, die ich gelinkt hast, ich bin stark unter dem Eindruck, dass ein expliziter Verweis auf eine contenteditable-element gepflegt werden. Sind Sie in der Lage, fügen Sie einen Barebone-jsfiddle mit deiner Methode? Dies ist ziemlich faszinierend
  • Ja, ich erkannte, dass der offset wird über das Ende des Elements könnte den Fehler verursachen. Ich habe versucht, mit verschiedenen offsets, kam aber zu dem Schluss, dass das nicht die Quelle des Fehlers. Und Nein, ich bin nicht der Planung über das schreiben einen WYSIWYG-editor, dieser ist für irgendetwas anderes. Gibt es nicht andere Elemente im text (Stil oder etwas anderes). Ich kann Ihnen ein Beispiel der HTML, wenn Sie es brauchen, um zu schreiben eine Antwort.
  • Es ist spät, also werde ich sehen, wenn ich kann hinzufügen, ein morgen. Vielen Dank für Ihr Interesse.

InformationsquelleAutor Elliot Bonneville | 2012-05-28
  1. 20

    Den code-snippet, das Sie haben, ist für text ein-und Texteingabefelder, nicht contenteditable Elemente.

    Vorausgesetzt, dass alle Ihre Inhalte in einem einzigen text-Knoten und die Auswahl ist vollständig enthalten innerhalb Sie, die folgenden arbeiten in allen gängigen Browsern, einschließlich IE 6.

    Demo: http://jsfiddle.net/9sdrZ/

    Code:

    function moveCaret(win, charCount) {
    var sel, range;
    if (win.getSelection) {
        //IE9+ and other browsers
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var textNode = sel.focusNode;
            var newOffset = sel.focusOffset + charCount;
            sel.collapse(textNode, Math.min(textNode.length, newOffset));
        }
    } else if ( (sel = win.document.selection) ) {
        //IE <= 8
        if (sel.type != "Control") {
            range = sel.createRange();
            range.move("character", charCount);
            range.select();
        }
    }
}
    • +1 weil es eine wirklich nützliche code-snippet. Nur eine Frage: warum willst du den Zugriff auf die globalen über die win-argument?
    • Um es mit einem iframe. In diesem Fall ist es der window host-Objekt, das wir daran interessiert sind, anstatt Ihre andere Rolle als global-Objekt. Für ein iframe, würde man moveCaret(iframeElement.contentWindow, charCount).
    • Verstanden, danke, hatte ich nicht gedacht!
    • Allerdings, wenn Sie brauchen zu bewegen, um den vorherigen text-Knoten, dieser nicht sel.focusNode == 0
    • Yep, daher die Bedingung, die am Anfang der Antwort.
    • Irgendwie ist das eine akzeptable Antwort auf Stackoverflow, ohne jede Art von Erklärung zu löschen.
    • Welche Erklärung willst du? Die Reichweite und der Auswahl der Methoden sind standard und gut dokumentiert. Der code ist einfach und kurz. Auch, wenn Sie möchten, versehen Sie mit Kommentaren, ist es möglich für Sie zu tun. Die einzigen Kommentare, die ich fühlen könnte nützlich sein würden, werden Beschriftungen für die beiden Haupt-code-Zweige (IE 9+ und anderen Browsern, IE 6 - 8).
    • Geben pre-made-Lösung ist wenig Wissenslücken zu schließen. Es wäre schön gewesen, für Sie zu zeigen, was falsch gelaufen ist in der Fragesteller den code, ich bin mir ziemlich sicher, dass diese Stapel-Etikette.
    • Ich bin schuldig, dass in Hunderten von Antworten. Ich glaube nicht, dass es Universelle Praxis, um fügen Sie einen Laufenden Kommentar zu sämtlichen code, der auf SO; ich bin mir nicht sicher, ob ich denke, dass es sein sollte. Nicht mehr hand-Betrieb zu ermutigen oder zu entmutigen Leute von der Suche des browser-APIs, die ich hier verwendet haben? Ich weiß es nicht. Wie auch immer, ich habe ein kleines detail in dieser Antwort.
    • Dies funktioniert nicht, wenn das ContentEditable hat mehrere text-Knoten in der es bereits und Sie müssen bewegen Sie den cursor außerhalb.
    • Ja. Die Antwort, die explizit sagt, dass.
    • Ist es möglich, die Kurbel den gleichen trick nur für ein Textfeld?

    InformationsquelleAutor Tim Down
Schreibe einen Kommentar