web-dev-qa-db-fra.com

Formater le texte dans une <textarea>?

Les zones de texte sont excellentes grâce à certaines fonctionnalités intégrées (barres de défilement). Comment puis-je formater <spans> du texte à l'intérieur du <textarea>?

csshtml5textareahtml
32
Don P

Si vous avez besoin de personnaliser votre zone de texte, reproduisez son comportement en utilisant un autre élément (comme un DIV) avec l'attribut contenteditable.

Il est plus personnalisable et plus moderne, textarea étant destiné uniquement au contenu en texte brut, pas au contenu enrichi.

<div id='fake_textarea' contenteditable></div>

Les barres de défilement peuvent être reproduites avec la propriété de débordement CSS. 

Vous pouvez utiliser ce faux texte dans un formulaire normalement, à savoir: si vous devez soumettre son contenu via la méthode POST, vous pouvez faire quelque chose comme (avec jQuery):

<input type='hidden' id='fake_textarea_content' name='foobar' />

...

$('#your_form').submit(function()
{
  $('#fake_textarea_content').val($('#fake_textarea').html());
});
62
Alcides Queiroz Aguiar

Vous ne pouvez pas styler séparément le contenu d'une zone de texte, vous devez utiliser s ou quelque chose de similaire. 

Voulez-vous quelque chose comme ça :?

http://jsfiddle.net/mekwall/XNkDx/

$('.editable').each(function(){
    this.contentEditable = true;
});

Cela vous permet d’éditer le contenu d’une div, et cela ressemblera toujours à une zone de texte,

Les caractères gras vont maintenant fonctionner.

8
Deep

Vous ne pouvez pas utiliser HTML dans TEXTAREA.

Le défilement peut être appliqué à n'importe quel élément en ajoutant overflow: auto et en fixant width et/ou height.

4
Marat Tanalin

Vous pouvez utiliser des éditeurs HTML pour le Web tels que CKEditor pour pouvoir formater les données dans la zone de texte. Vérifiez ceci http://ckeditor.com/

1
kaustubh

Une autre façon de soumettre la zone de texte "fake" consiste à inclure les lignes suivantes dans la balise de formulaire

<form onsubmit=" $('#fake_textarea_content').val($('#fake_textarea').html());">
</form>
0
Christian