Wie führen Sie einen Bildlauf zu der position des Cursors in der textarea?

HTML

<textarea rows='5'>
sdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadjsdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadjsdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadjsdfasjfalsfjasf;klasdfklaksdfkjlasdfkjlasdjkfadls;fjklasdfjklasdkjlfaskljdfkalsjdfjlkasdfkjlasdkjlfasfkl;ajklsdfjklasdfkjlaskjldfaskjlfkljsadkjlfaskjldfkjlasdfkjlasdjklfaskljdfkjlasfkjlasdkjlfasjklfajklsdfjklasdfjlkadj
</textarea>

<br />
<button id='scroll-to-cursor'>Scroll to Cursor</button>

JavaScript

$('#scroll-to-cursor').on('click', function() {
    //?
});

Gewünschte Ergebnis

Klicken Sie irgendwo in das Textfeld zu plazieren Sie den cursor.
Blättern entfernt, so dass der cursor nicht sichtbar ist.
Klicken Sie auf "Scroll-to-Cursor" - Taste.
Textarea scrollt, um die position des Cursors

Hinweis: ich verwende jQuery.

Nur so konnte ich herausfinden, wie Sie navigieren, ist die Verwendung von jQuery scrollTop
Funktion. Es legt die scroll-position, um "die Anzahl der Pixel, die von der Ansicht versteckt oberhalb des scrollbaren Bereichs".

Ich habe in Diagrammen erfasst das problem unten. Vorbei an der Länge der roten Linie (in Pixel) scrollTop sollte den trick tun. Aber ich kann nicht herausfinden, wie man die Länge der Linie.

Wie führen Sie einen Bildlauf zu der position des Cursors in der textarea?

Würde this link arbeiten? Es ist reines JS.
Sie können einfach konzentrieren die textarea-Komponente, um es wieder zu der Position des Cursors in webkit-Browsern. Funktioniert nicht in IE/Firefox obwohl
es hat funktioniert, vielen Dank! Auf den ersten Blick sah ich, dass es für Eingänge und horizontalen scrollen, so dass ich nicht denke, dass es beantragt, aber ich habe es gerade getestet und es funktioniert.

InformationsquelleAutor Adam Zerner | 2015-04-27

10
```
textarea.blur()
textarea.focus()
```
Macht den job.

Beispiel: https://jsfiddle.net/syy25x69/

Wählen Sie einen text im IE siehe: Set textarea-Auswahl in Internet Explorer
- Erklären, warum das funktionieren sollte - dies wird auch helfen, den rest der Gemeinschaft zu verstehen, wie Sie dieses problem gelöst/Frage. Dies ist besonders wichtig für Fragen, die bereits angenommen haben, Antworten - es muss klar sein, warum Ihre Antwort sollte auch betrachtet werden.
- es wird unscharf/focus, textarea und setzen Sie DEN cursor an das ENDE der textarea, also es scrollt die textarea zu Ende, nicht an den Ort des Cursors. das ist falsch
- eigentlich ist es nicht angesichts der Tatsache, dass Sie nicht verlieren den Fokus auf das Feld, der cursor bleibt an seiner Stelle
- Die einzige Lösung, die funktioniert jetzt!
- es funktioniert jetzt (zumindest auf dem Mac in der aktuellen Chrome), aber damals habe ich es getestet (Feb 15 2017 auf Chrome auf Linux) ich glaube, es funktioniert wie ich beschrieben habe (ich war nicht in der Lage, leicht zu finden und download von Chrome-version für diesen Tag)
InformationsquelleAutor Audi Nugraha
6

Von Jonathan Levine ' s Kommentar, erkannte ich, dass diese Antwort für mich funktioniert.

Fiddle Demo

JavaScript
```
$('#scroll-to-cursor').on('click', function() {    
    $('textarea').focus();
    $.event.trigger({ type : 'keypress' }); //works cross-browser

    //new KeyboardEvent('keypress'); //doesn't work in IE and Safari

    /* var evt = document.createEvent('KeyboardEvent');
    evt.initKeyEvent('keypress', true, true, null, false, false, false, false, 0, 32);
    $textarea.dispatchEvent(evt);

    evt = document.createEvent('KeyboardEvent');
    evt.initKeyEvent('keypress', true, true, null, false, false, false, false, 8, 0);
    $textarea.dispatchEvent(evt); */
});

/*
    To test:
    1) Click somewhere in the textarea to place cursor
    2) Scroll away so cursor isn't visible
    3) Click "Scroll to Cursor" button
*/
```
Erklärung

Wenn der Benutzer eine Taste drückt, wird der browser macht zwei Dinge:
1. Fügt den Schlüssel in die position nach dem cursor.
2. Schriftrollen zu dieser position.
Diese Lösung nur simuliert, die (ohne tatsächlich die Eingabe von text).

Edit: Die alte Lösung ist nicht Normen-konform. initKeyEvent ist veraltet. Das update arbeitet nur mit den KeyboardEvent() Konstruktor, der ist kompatibel und funktioniert in allen Browsern außer dem IE (Safari ist ein Fragezeichen).

Edit 2: Mit $.event.trigger({ type : 'keypress' }); statt new KeyboardEvent() funktioniert genauso gut, und funktioniert in allen Browsern.
- Ich hatte die gleiche Idee mit dem Pfeil rechts und Pfeil Links, aber deiner ist besser, weil der Pfeil-Taste-Nutzung würde sich ändern, cursor-position am Ende des Textes 😉
- Die keypress ist hier irrelevant, dies funktioniert auch, wenn Sie kommentieren Sie diese Zeile: jsfiddle.net/g74aabta Was passiert, ist, dass das klicken auf die Schaltfläche verwischt die textarea, und re-Fokussierung des textarea scrollen Sie den cursor in der Ansicht. Haben Sie nicht denken, es war seltsam, dass die textarea ist nicht ein argument für $.event.trigger({ type : 'keypress' }); ?
InformationsquelleAutor Adam Zerner
0

Dies ist meine spin auf die Dinge.

Fand ich, dass Audi Nugraha Lösung gearbeitet, bei der Prüfung, aber nicht, wenn ich versuchte, es in ein Elektron-Anwendung.

Einer Lösung, die Arbeit für mich war, um den cursor an den Anfang und dann Weichzeichnen/focus.
```
textarea.selectionEnd = textarea.selectionStart = position;
textarea.blur();
textarea.focus();
```
Habe ich eingearbeitet, die oben in eine Funktion:
```
function scrollTextarea(textarea,position) {
    textarea.selectionEnd = textarea.selectionStart = position;
    textarea.blur();
    textarea.focus();
}
```
InformationsquelleAutor Manngo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.