Javascript Girl
  1. Javascript Girl
  3. Croiser le navigateur "sauter vers" / "défiler" textarea
Intereting Posts
Enregistrez et chargez un organigramme sur jsPlumb Mise à l'échelle d'une application de discussion – sondage court par rapport à une enquête longue (AJAX, PHP) Empêcher le compilateur de fermeture Google de renommer les objets de configuration Google Maps L'écouteur de traînée V3 ajoute tous les marqueurs à la carte Y compris javascript dans un autre javascript inclus Détecter et gérer un bouton cliquez sur la page HTML active L'analyse de la carte java est revenue en réponse JSON à l'aide de javascript Technique préférée pour le partage de noms javascript AngularJS compose les données $ http post Firefox Addon SDK: Des façons d'afficher les options à l'utilisateur? Tomcat 7.0.50 java webscoket implementation donne 404 erreur JavaScript – Passer une référence à cette fonction anonyme actuelle Cookie Javascript Pourquoi mettre JavaScript en tête Comment passer le paramètre PHP array à la fonction Javascript?

Croiser le navigateur "sauter vers" / "défiler" textarea

J'ai une zone de texte avec plusieurs lignes d'entrée, et un événement JavaScript déclenche ce qui nécessite de faire défiler la zone de texte à la ligne 345.

scrollTop sorte ce que je veux, sauf dans la mesure où je peux le dire c'est le niveau de pixel, et je veux quelque chose qui fonctionne sur un niveau de ligne. Ce qui complique également les choses, c'est que, une fois de plus, il n'est pas possible de rendre les zones de texte non en forme de ligne.

Vous pouvez arrêter l'emballage avec l'attribut wrap. Il ne fait pas partie du HTML 4, mais la plupart des navigateurs le supportent.
Vous pouvez calculer la hauteur d'une ligne en divisant la hauteur de la zone par son nombre de lignes. 

 <script type="text/javascript" language="JavaScript"> function Jump(line) { var ta = document.getElementById("TextArea"); var lineHeight = ta.clientHeight / ta.rows; var jump = (line - 1) * lineHeight; ta.scrollTop = jump; } </script> <textarea name="TextArea" id="TextArea" rows="40" cols="80" title="Paste text here" wrap="off"></textarea> <input type="button" onclick="Jump(98)" title="Go!" value="Jump"/>

Testé sur OK dans FF3 et IE6.

Si vous utilisez .scrollHeight au lieu de .clientHeight, cela fonctionnera correctement pour les zones de texte affichées avec une hauteur limitée et une barre de défilement: 

 <script type="text/javascript" language="JavaScript"> function Jump(line) { var ta = document.getElementById("TextArea"); var lineHeight = ta.scrollHeight / ta.rows; var jump = (line - 1) * lineHeight; ta.scrollTop = jump; } </script> <textarea name="TextArea" id="TextArea" rows="40" cols="80" title="Paste text here" wrap="off"></textarea> <input type="button" onclick="Jump(98)" title="Go!" value="Jump"/>