HTML/CSS/JS : Comment donner l'illusion d'un textarea avec des numéros de ligne ?

Question

Je souhaite avoir une zone de texte qui affiche les numéros de ligne à gauche. La fonction Wrap doit être désactivée (pour permettre le défilement horizontal). Je souhaite que ma page soit un simple fichier .html autonome (il n'y aura pas de graphiques), et j'aimerais donc éviter tout framework tiers.

Quelle direction dois-je prendre ? Comment procéder ?

Answer 1

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

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

Bien sûr populate() (ainsi que la déclaration de style et la déclaration d'événement) devrait être plus robuste et plus intelligente, mais elle n'est là qu'à titre d'exemple.

Answer 2

Je pense que la meilleure solution serait d'avoir une zone de texte normale, et d'afficher un aperçu (comme stack overflow) au fur et à mesure de la saisie. Dans cet aperçu, vous pourriez facilement ajouter des numéros de ligne sur chaque ligne et formater l'apparence via CSS.

Answer 3

Une autre méthode simple consiste à créer une image d'arrière-plan étroite mais haute et à ajouter un rembourrage à gauche sur la zone de texte. Cette méthode présente l'inconvénient mineur d'avoir un nombre de lignes et un style de police fixes, mais c'est l'option qui nécessite le moins de code.

Answer 4

Sans images, c'est une question difficile.

Le meilleur pari : placer un deuxième zone de texte avec des paramètres identiques (taille de la police, hauteur des lignes, espacement...) mais avec un style différent (pas de couleur d'arrière-plan, pas de bordures) à gauche de votre zone de texte d'origine. Mettez-le en lecture seule, retirez-le de la rotation des onglets ( tabindex=99999 pourrait faire l'affaire ou simplement le désactiver ) et d'y inscrire des numéros de ligne. Cela devrait fonctionner correctement, pour autant que je sache, et même survivre à des situations telles que le redimensionnement manuel de la police par le client dans son navigateur.

Vous pouvez même utiliser position: relative et un grand padding-left: dans la zone de texte d'origine pour déplacer la zone de texte du compteur dans la zone d'origine.

Les inconvénients : Le compteur de lignes ne suit pas le défilement vertical du textarea. Voir les commentaires ci-dessous.

Answer 5

Il faudrait envelopper la zone de texte et capturer les frappes à la recherche de caractères de retour à la ligne (par exemple ENTER). Une recherche rapide sur Google permet d'obtenir http://www.dhtmlgoodies.com/forum/viewtopic.php?t=506