web-dev-qa-db-fra.com

HTML ajoutant des numéros de ligne à la zone de texte

J'ai une zone de texte comme dans le code ci-dessous, comment afficher les numéros de ligne sur le côté gauche de celui-ci.

Existe-t-il un plugin jquery?

<TEXTAREA name="program" id="program" rows="15" cols="65" ></TEXTAREA>
htmltextarea
41
Hulk

Il y a Lined TextArea miroir plugin pour jQuery par Alan Williamson
Licence MIT
jQuery 1.3+

26
anatoly techtonik

Vous pouvez très bien essayer Code Mirror , qui est une bibliothèque JavaScript pour intégrer un éditeur de code dans une page Web.

Avec des lignes de code, il a de grandes fonctionnalités comme

  • Autocompletion
  • Thèmes
  • Modes de langues mixtes
  • Chercher
  • Interface de fusion/diff
  • Barres de défilement personnalisées, etc.
8
ChandrasekarG

C'est une astuce très simple mais efficace. Il insère une image avec les numéros de ligne déjà ajoutés.

Le seul problème est que vous devrez peut-être créer votre propre image pour correspondre à la conception de votre interface utilisateur.

https://jsfiddle.net/vaakash/5TF5h/

textarea {
    background: url(http://i.imgur.com/2cOaJ.png);
    background-attachment: local;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
}

Nous remercions: Aakash Chakravarthy

5
Bern

CodePress est celui utilisé dans WordPress.

2
Mathias Bynens

Personne n'a essayé de le faire en utilisant un objet HTML5 Canvas et en peignant des numéros de ligne dessus. Voici donc ce que j'ai réussi à mettre en commun en quelques heures. Placez la toile et la zone de texte l'une à côté de l'autre et peignez les numéros sur la toile.

https://www.w3schools.com/code/tryit.asp?filename=G68VMFWS12UH

enter image description here

il est vrai qu'il y a une limitation, nous ne pouvons pas gérer le retour à la ligne facile dans la fonction Paint () sans itérer le contenu de la zone de texte entière et se retirer pour refléter l'objet pour les mesures de chaque hauteur de ligne. Cela produirait également un code très complexe.

image d'aperç

1
SoLaR