Comment vous faites défiler jusqu'à la position du curseur dans un textarea?

JS Fiddle Démo

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

Résultat Souhaité

  1. Cliquez quelque part dans la zone de texte pour placer le curseur.
  2. Défilement si le curseur n'est pas visible.
  3. Cliquez sur "faites Défiler jusqu'à la position du Curseur" bouton.
  4. Textarea permet d'accéder à la position du curseur

Note: je suis en utilisant jQuery.

La seule façon que je pouvais comprendre comment le défilement est d'utiliser du jQuery scrollTop
fonction. Il définit la position de défilement à "le nombre de pixels qui sont cachés de la vue au-dessus de la zone déroulante".

J'ai schématisé le problème ci-dessous. De passage dans la longueur de la ligne rouge (en pixels) de scrollTop devrait faire l'affaire. Mais je ne peux pas comprendre comment obtenir la longueur de la ligne.

Comment vous faites défiler jusqu'à la position du curseur dans un textarea?

Serait - this travaux de lien? C'est de la pure JS.
Vous pouvez simplement de recentrer le textarea pour le ramener à la position du curseur dans les navigateurs webkit. Ne fonctionne pas sous IE/Firefox si
il a fait un travail, merci! Le premier coup d'œil, j'ai vu que c'était pour les entrées et le défilement horizontal, donc je ne pense pas qu'il appliqué mais je l'ai juste testé et il fonctionne.

OriginalL'auteur Adam Zerner | 2015-04-27

  1. 10
    textarea.blur()
textarea.focus()

    Fait le travail.

    Exemple: https://jsfiddle.net/syy25x69/

    Pour sélectionner un texte dans IE voir: Ensemble textarea sélection dans Internet Explorer

    Expliquer pourquoi cela devrait fonctionner - ce qui va aussi aider le reste de la communauté à comprendre comment vous avez résolu ce problème/question. Ceci est particulièrement important pour les questions qui ont déjà des réponses acceptées - il doit être clair sur le pourquoi de votre réponse doit également être envisagée.
    il sera flou/textarea et de mettre le curseur à LA FIN de la textarea, afin de faire défiler textarea à la fin, pas à l'endroit du curseur. ce qui est faux
    en fait, il ne veut pas le faire étant donné que vous n'avez pas perdre le focus du champ, le curseur restera à sa place
    La seule solution qui fonctionne maintenant!
    il ne fonctionne pour l'instant (au moins sur Mac dans le courant de Chrome), mais à l'époque, je l'ai testé (15 Février 2017 sur Chrome sur Linux) je crois qu'il a travaillé comme je l'ai décrit (j'ai été incapable de trouver facilement et de télécharger la version Chrome pour la journée)

    OriginalL'auteur Audi Nugraha

  2. 5

    De Jonathan Levine commentaire, j'ai réalisé que cette réponse fonctionne pour moi.

    Violon Démo

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

    Explication

    Lorsque l'utilisateur appuie sur une touche, le navigateur fait deux choses:

    1. Place la clé dans la position après le curseur.
    2. Défile jusqu'à cette position.

    Cette solution simule simplement que (sans entrer de texte).

    Edit: La vieille solution n'est pas conforme aux normes. initKeyEvent est obsolète. La mise à jour n'utilise que les KeyboardEvent() constructeur, ce qui est conforme et fonctionne dans tous les navigateurs sauf IE (Safari est un point d'interrogation).

    Edit 2: à l'Aide de $.event.trigger({ type : 'keypress' }); au lieu de new KeyboardEvent() fonctionne tout aussi bien, et fonctionne dans tous les navigateurs.

    J'ai eu la même idée avec la flèche de droite et flèche de gauche, mais le tien est mieux à cause de la flèche d'utilisation de la clé serait de changer la position du curseur sur la fin du texte 😉
    Le keypress est pas pertinente ici, cela fonctionne même si vous commentez cette ligne: jsfiddle.net/g74aabta Ce qui se passe c'est qu'en cliquant sur le bouton, c'est le flou le textarea, et re-focalisation du textarea est le défilement du curseur dans la vue. Ne pensez-vous pas que c'était bizarre que le textarea n'est pas un argument pour $.event.trigger({ type : 'keypress' }); ?

    OriginalL'auteur Adam Zerner