javascript - ¿Cómo se desplaza a la posición del cursor en un área de texto?

jquery html

Question

Demostración de JS Fiddle

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() {
    // ?
});

Resultado deseado

1. Haga clic en algún lugar del área de texto para colocar el cursor.
2. Desplácese para que el cursor no esté visible.
3. Haga clic en el botón "Desplazarse al cursor".
4. Textarea se desplaza a la posición del cursor

Nota: estoy usando jQuery.

La única forma en que pude descifrar cómo desplazarme es usar la función scrollTop de jQuery. Establece la posición de desplazamiento en "la cantidad de píxeles que están ocultos de la vista sobre el área desplazable".

He diagramado el problema a continuación. Pasar en la longitud de esa línea roja (en píxeles) para scrollTop hacia scrollTop debería hacer el truco. Pero no puedo entender cómo obtener la longitud de la línea.

Answer 1

Del comentario de Jonathan Levine, me di cuenta de que esta respuesta funciona para mí.

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
*/

Explicación

Cuando el usuario presiona una tecla, el navegador hace dos cosas:

1. Coloca la llave en la posición después del cursor.
2. Se desplaza a esa posición.

Esta solución simplemente simula eso (sin ingresar ningún texto).

Editar: la solución anterior no cumple con los estándares. initKeyEvent está en desuso. La actualización solo utiliza el constructor KeyboardEvent() , que es compatible y funciona en todos los navegadores excepto IE (Safari es un signo de interrogación).

Editar 2: Usar $.event.trigger({ type : ''keypress'' }); en lugar del new KeyboardEvent() funciona igual de bien, y funciona en todos los navegadores.

Answer 2

textarea.blur()
textarea.focus()

Hace el trabajo.

Ejemplo: https://jsfiddle.net/syy25x69/

Para seleccionar un texto en IE, consulte: Establecer la selección de texto en Internet Explorer