HTML/CSS/JS: Comment faire illusion sur une zone de texte avec des numéros de ligne?

Question

Je veux avoir une zone de texte qui affiche les numéros de ligne sur la gauche. L'enrubannage doit être réglé sur "off" (de sorte que le défilement horizontal soit disponible). Je veux que ma page soit un seul fichier .html autonome (il n'y aura pas de graphiques), donc je voudrais éviter les frameworks tiers.

Dans quel sens dois-je aller? Comment ferais-tu ceci?

Answer 1

Je pense que votre meilleur pari serait d'avoir juste une zone de texte régulière, et montrer un aperçu (comme le débordement de pile) comme ils tapent le long. Dans cet aperçu, vous pouvez facilement ajouter des numéros de ligne sur chaque ligne et mettre en forme le look via CSS.

Answer 2

Vous devez envelopper la zone de texte et capturer les frappes à la recherche de caractères de retour à la ligne (par exemple, ENTRER). Faire une recherche rapide sur Google et vous obtenez http://www.dhtmlgoodies.com/forum/viewtopic.php?t=506

Answer 3

Personnellement, je voudrais juste avoir une zone de texte régulière et un div sur le côté gauche qui affiche les chiffres (ajustement automatique possible si plus de retours de chariot sont ajoutés).

Answer 4

Une autre méthode simple consiste à créer une image d'arrière-plan étroite mais de grande taille et un peu de marge gauche sur la zone de texte. Cela a l'inconvénient mineur d'avoir un nombre fixe de lignes et de style de police, mais c'est l'option avec le moins de code requis.

Answer 5

Sans images, c'est difficile. Meilleur résultat: Placez une deuxième zone de texte avec des paramètres identiques (taille de police, hauteur de ligne, remplissage ...) mais un style différent (pas de couleur d'arrière-plan, pas de bordure) à gauche de votre zone de texte d'origine. Faites-le en lecture seule, sortez-le de la rotation de l'onglet (tabindex=99999 pourrait faire l'affaire ou simplement en le désactivant), et y mettre des numéros de ligne. Cela devrait fonctionner correctement et aussi bien que je peux penser, il devrait même survivre à des choses comme le client redimensionnant la police manuellement dans leur navigateur.

Vous pouvez même utiliser position: relative et une grande valeur padding-left: dans la zone de texte d'origine pour déplacer la zone de texte du compteur dans l'original. Défaillance: Le compteur de lignes ne suit pas le défilement vertical de la zone de texte. Voir les commentaires ci-dessous.

Answer 6

Je commencerais par deux zones de texte et un mécanisme de synchronisation. Quelque chose comme ça,

<script> 
    window.sync = function(e){ 
      var textarea = document.getElementById("lines"); 
      var source = document.getElementById("some_text_area"); 
      textarea.scrollTop = source.scrollTop; 
     } 

     window.populate = function populate(){ 
      if(populate.started){ 
       return; 
      } 

      populate.started = true; 
      var textarea = document.getElementById("lines"); 
      var str = ''; 
      for(var i=0;i < 100;i++){ 
       str = str + (i +'\r\n'); 
      } 
      textarea.value = str; 
     } 
    </script> 

<div> 
<textarea 
    style="width:40px;overflow:hidden;height:40px;" 
    readonly="true" 
    id="lines" 
></textarea> 
<textarea 
    style="width:500px;height:40px;" 
    id="some_text_area" 
    onclick="populate()" 
    onscroll="sync();" 
></textarea> 
</div> 

Ofcourse populate() fonction (et la déclaration de style et la déclaration de l'événement) devrait être plus robuste et intelligent, mais, juste pour but de vitrine.