HTMLTextAreaElement

Proprits d'instance

Hrite aussi des proprits de son interface parente, HTMLElement.

autocomplete

Une chane de caractres reprsentant l'attribut autocomplete de l'lment.

cols

Un nombre reprsentant l'attribut cols de l'lment, indiquant la largeur visible de la zone de texte.

defaultValue

Une chane de caractres reprsentant la valeur par dfaut du contrle, qui se comporte comme la proprit Node.textContent.

dirName

Une chane de caractres reprsentant la direction de l'lment.

disabled

Un boolen reprsentant l'attribut disabled de l'lment, indiquant que le contrle n'est pas disponible pour l'interaction.

form Lecture seule

Retourne une rfrence l'lment formulaire parent. Si cet lment n'est pas contenu dans un lment formulaire, il peut s'agir de l'attribut id de n'importe quel lment HTML <form> du mme document ou de la valeur null.

labels Lecture seule

Retourne une liste (NodeList) des lments HTML <label> associs cet lment.

maxLength

Un nombre reprsentant l'attribut maxlength de l'lment, indiquant le nombre maximal de caractres que l'utilisateurice peut saisir. Cette contrainte est value uniquement lorsque la valeur change.

minLength

Un nombre reprsentant l'attribut minlength de l'lment, indiquant le nombre minimal de caractres que l'utilisateurice peut saisir. Cette contrainte est value uniquement lorsque la valeur change.

name

Une chane de caractres reprsentant l'attribut name de l'lment, contenant le nom du contrle.

placeholder

Une chane de caractres reprsentant l'attribut placeholder de l'lment, contenant une indication l'utilisateurice sur ce qu'ilelle doit saisir dans le contrle.

readOnly

Un boolen reprsentant l'attribut readonly de l'lment, indiquant que l'utilisateurice ne peut pas modifier la valeur du contrle.

required

Un boolen reprsentant l'attribut required de l'lment, indiquant que l'utilisateurice doit saisir une valeur avant de soumettre le formulaire.

rows

Un nombre reprsentant l'attribut rows de l'lment, indiquant le nombre de lignes de texte visibles pour le contrle.

selectionDirection

Une chane de caractres reprsentant la direction dans laquelle la slection a eu lieu. Il s'agit de forward si la slection a t effectue dans le sens dbut-fin de la langue courante, ou de backward pour la direction oppose. Cela peut aussi tre none si la direction est inconnue.

selectionEnd

Un nombre reprsentant l'indice de fin du texte slectionn. Si aucun texte n'est slectionn, il contient l'indice du caractre qui suit le curseur de saisie. Lorsqu'il est dfini, le contrle se comporte comme si setSelectionRange() avait t appel avec cette valeur comme second argument, et selectionStart comme premier argument.

selectionStart

Un nombre reprsentant l'indice du dbut du texte slectionn. Si aucun texte n'est slectionn, il contient l'indice du caractre qui suit le curseur de saisie. Lorsqu'il est dfini, le contrle 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 contrle. Identique la lecture de value.length.

type Lecture seule

Retourne la chane de caractres textarea.

validationMessage Lecture seule

Retourne un message localis qui dcrit les contraintes de validation que le contrle ne satisfait pas (le cas chant). Il s'agit d'une chane vide si le contrle 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 lment.

value

Une chane de caractres reprsentant la valeur brute contenue dans le contrle.

willValidate Lecture seule

Retourne si l'lment est candidat la validation de contrainte. false si une condition l'empche, y compris si sa proprit readOnly ou disabled vaut true.

wrap

Une chane de caractres reprsentant l'attribut wrap de l'lment, indiquant comment le contrle gre le retour la ligne du texte.

Mthodes d'instance

Hrite aussi des mthodes de son interface parente, HTMLElement.

checkValidity()

Retourne false si l'lment est candidat la validation de contrainte et qu'il ne satisfait pas ses contraintes. Dans ce cas, il dclenche aussi un vnement invalid annulable sur le contrle. Il retourne true si le contrle n'est pas candidat la validation de contrainte, ou s'il satisfait ses contraintes.

reportValidity()

Cette mthode signale l'utilisateurice les problmes de contraintes sur l'lment, le cas chant. S'il y a des problmes, elle dclenche un vnement invalid annulable sur l'lment et retourne false ; s'il n'y a pas de problme, elle retourne true.

select()

Slectionne le contenu du contrle.

setCustomValidity()

Dfinit un message de validit personnalis pour l'lment. Si ce message n'est pas une chane vide, alors l'lment prsente une erreur de validit personnalise et n'est pas valid.

setRangeText()

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

setSelectionRange()

Slectionne une plage de texte dans l'lment (sans le slectionner).

vnements

Hrite aussi des vnements de son interface parente, HTMLElement.

coutez ces vnements avec addEventListener() ou en assignant un gestionnaire la proprit oneventname de cette interface :

L'vnement select

Se dclenche lorsqu'un texte a t slectionn.

L'vnement selectionchange

Se dclenche lorsque la slection de texte dans un lment HTML <textarea> a t modifie.

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

Insrer 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 complte 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>"));

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

Spcifications

Compatibilit des navigateurs