HTMLTextAreaElement

Propriétés d'instance

Hérite aussi des propriétés de son interface parente, HTMLElement.

autocomplete

Une chaîne de caractères représentant l'attribut autocomplete de l'élément.

cols

Un nombre représentant l'attribut cols de l'élément, indiquant la largeur visible de la zone de texte.

defaultValue

Une chaîne de caractères représentant la valeur par défaut du contrôle, qui se comporte comme la propriété Node.textContent.

dirName

Une chaîne de caractères représentant la direction de l'élément.

disabled

Un booléen représentant l'attribut disabled de l'élément, indiquant que le contrôle n'est pas disponible pour l'interaction.

form Lecture seule

Retourne une référence à l'élément formulaire parent. Si cet élément n'est pas contenu dans un élément formulaire, il peut s'agir de l'attribut id de n'importe quel élément HTML <form> du même document ou de la valeur null.

labels Lecture seule

Retourne une liste (NodeList) des éléments HTML <label> associés à cet élément.

maxLength

Un nombre représentant l'attribut maxlength de l'élément, indiquant le nombre maximal de caractères que l'utilisateur·ice peut saisir. Cette contrainte est évaluée uniquement lorsque la valeur change.

minLength

Un nombre représentant l'attribut minlength de l'élément, indiquant le nombre minimal de caractères que l'utilisateur·ice peut saisir. Cette contrainte est évaluée uniquement lorsque la valeur change.

name

Une chaîne de caractères représentant l'attribut name de l'élément, contenant le nom du contrôle.

placeholder

Une chaîne de caractères représentant l'attribut placeholder de l'élément, contenant une indication à l'utilisateur·ice sur ce qu'il·elle doit saisir dans le contrôle.

readOnly

Un booléen représentant l'attribut readonly de l'élément, indiquant que l'utilisateur·ice ne peut pas modifier la valeur du contrôle.

required

Un booléen représentant l'attribut required de l'élément, indiquant que l'utilisateur·ice doit saisir une valeur avant de soumettre le formulaire.

rows

Un nombre représentant l'attribut rows de l'élément, indiquant le nombre de lignes de texte visibles pour le contrôle.

selectionDirection

Une chaîne de caractères représentant la direction dans laquelle la sélection a eu lieu. Il s'agit de forward si la sélection a été effectuée dans le sens début-fin de la langue courante, ou de backward pour la direction opposée. Cela peut aussi être none si la direction est inconnue.

selectionEnd

Un nombre représentant l'indice de fin du texte sélectionné. Si aucun texte n'est sélectionné, il contient l'indice du caractère qui suit le curseur de saisie. Lorsqu'il est défini, le contrôle se comporte comme si setSelectionRange() avait été appelé avec cette valeur comme second argument, et selectionStart comme premier argument.

selectionStart

Un nombre représentant l'indice du début du texte sélectionné. Si aucun texte n'est sélectionné, il contient l'indice du caractère qui suit le curseur de saisie. Lorsqu'il est défini, le contrôle se comporte comme si setSelectionRange() avait été appelé avec cette valeur comme premier argument et selectionEnd comme second argument.

textLength Lecture seule

Retourne la longueur en points de code de la value du contrôle. Identique à la lecture de value.length.

type Lecture seule

Retourne la chaîne de caractères textarea.

validationMessage Lecture seule

Retourne un message localisé qui décrit les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Il s'agit d'une chaîne vide si le contrôle n'est pas candidat à la validation de contrainte (willValidate vaut false), ou s'il satisfait ses contraintes.

validity Lecture seule

Retourne l'état de validité de cet élément.

value

Une chaîne de caractères représentant la valeur brute contenue dans le contrôle.

willValidate Lecture seule

Retourne si l'élément est candidat à la validation de contrainte. false si une condition l'empêche, y compris si sa propriété readOnly ou disabled vaut true.

wrap

Une chaîne de caractères représentant l'attribut wrap de l'élément, indiquant comment le contrôle gère le retour à la ligne du texte.

Méthodes d'instance

Hérite aussi des méthodes de son interface parente, HTMLElement.

checkValidity()

Retourne false si l'élément est candidat à la validation de contrainte et qu'il ne satisfait pas ses contraintes. Dans ce cas, il déclenche aussi un évènement invalid annulable sur le contrôle. Il retourne true si le contrôle n'est pas candidat à la validation de contrainte, ou s'il satisfait ses contraintes.

reportValidity()

Cette méthode signale à l'utilisateur·ice les problèmes de contraintes sur l'élément, le cas échéant. S'il y a des problèmes, elle déclenche un évènement invalid annulable sur l'élément et retourne false ; s'il n'y a pas de problème, elle retourne true.

select()

Sélectionne le contenu du contrôle.

setCustomValidity()

Définit un message de validité personnalisé pour l'élément. Si ce message n'est pas une chaîne vide, alors l'élément présente une erreur de validité personnalisée et n'est pas validé.

setRangeText()

Remplace une plage de texte dans l'élément par un nouveau texte.

setSelectionRange()

Sélectionne une plage de texte dans l'élément (sans le sélectionner).

Évènements

Hérite aussi des évènements de son interface parente, HTMLElement.

Écoutez ces évènements avec addEventListener() ou en assignant un gestionnaire à la propriété oneventname de cette interface :

L'évènement select

Se déclenche lorsqu'un texte a été sélectionné.

L'évènement selectionchange

Se déclenche lorsque la sélection de texte dans un élément HTML <textarea> a été modifiée.

Exemples

Exemple de zone de texte à taille automatique

Faire grandir automatiquement une zone de texte pendant la saisie :

JavaScript

function autoGrow(field) {
  if (field.scrollHeight > field.clientHeight) {
    field.style.height = `${field.scrollHeight}px`;
  }
}

document.querySelector("textarea").addEventListener("keyup", (e) => {
  autoGrow(e.target);
});

CSS

textarea.no-scrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}

HTML

<form>
  <fieldset>
    <legend>Vos commentaires</legend>
    <p><textarea class="no-scrollbars"></textarea></p>
    <p><input type="submit" value="Envoyer" /></p>
  </fieldset>
</form>

Exemple d'insertion de balises HTML

Insérer des balises HTML dans une zone de texte :

function insert(startTag, endTag) {
  const textArea = document.myForm.myTextArea;
  const start = textArea.selectionStart;
  const end = textArea.selectionEnd;
  const oldText = textArea.value;

  const prefix = oldText.substring(0, start);
  const inserted = startTag + oldText.substring(start, end) + endTag;
  const suffix = oldText.substring(end);

  textArea.value = `${prefix}${inserted}${suffix}`;

  const newStart = start + startTag.length;
  const newEnd = end + startTag.length;

  textArea.setSelectionRange(newStart, newEnd);
  textArea.focus();
}

function insertURL() {
  const newURL = prompt("Entrez l'URL complète pour le lien");
  if (newURL) {
    insert(`<a href="${newURL}">`, "</a>");
  } else {
    document.myForm.myTextArea.focus();
  }
}

const strong = document.querySelector("#format-strong");
const em = document.querySelector("#format-em");
const link = document.querySelector("#format-link");
const code = document.querySelector("#format-code");

strong.addEventListener("click", (e) => insert("<strong>", "</strong>"));
em.addEventListener("click", (e) => insert("<em>", "</em>"));
link.addEventListener("click", (e) => insertURL());
code.addEventListener("click", (e) => insert("<code>", "</code>"));

Décorer le span pour qu'il se comporte comme un lien :

.intLink {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

<form name="myForm">
  <p>
    [
    <span class="intLink" id="format-strong"><strong>Gras</strong></span> |
    <span class="intLink" id="format-em"><em>Italique</em></span> |
    <span class="intLink" id="format-link">Lien</span> |
    <span class="intLink" id="format-code">code</span> ]
  </p>

  <p>
    <textarea name="myTextArea" rows="10" cols="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. 
    </textarea>
  </p>
</form>

Spécifications

Compatibilité des navigateurs