Maison > interface Web > js tutoriel > Comment puis-je afficher des balises HTML dans une zone de texte ?

Comment puis-je afficher des balises HTML dans une zone de texte ?

Linda Hamilton
Libérer: 2024-12-05 05:51:11
original
888 Les gens l'ont consulté

How Can I Display HTML Tags within a Text Area?

Affichage des balises HTML dans une zone de texte

Les zones de texte sont incapables d'interpréter les balises HTML comme autre chose que du texte. Cela pose un défi si vous devez afficher du contenu HTML, tel que , , et , dans la zone de texte.

Alternative : Contenu modifiable Div

Réaliser cette fonctionnalité avec une zone de texte n'est pas réalisable. Au lieu de cela, vous pouvez utiliser un div à contenu modifiable, qui est simple à mettre en œuvre :

<div contenteditable="true"></div>
Copier après la connexion

Apparence et formatage

Les divs avec l'attribut "contenteditable" permettent l'affichage en ligne édition et prise en charge du formatage HTML. Le CSS ci-dessous fournit un style de base pour le div :

div.editable {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  padding: 5px;
}

strong {
  font-weight: bold;
}
Copier après la connexion

Exemple

Le code HTML suivant montre comment utiliser un div à contenu modifiable :

<div contenteditable="true">
  This is the first line.<br>
  See, how the text fits here, also if<br>
  there is a <strong>linebreak</strong> at the end?
  <br>
  It works nicely.
  <br>
  <br>
  <span>
Copier après la connexion

Ce div vous permet d'effectuer des modifications en ligne et d'appliquer le formatage HTML. Il fournit une solution plus robuste et conviviale pour afficher du contenu HTML dans une page Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal