Comment Désactiver le Redimensionnement de l'Élément <textarea>?
Les navigateurs Webkit, tels que Safari, Chrome, ont associé un nouvel élément d'interface utilisateur en bas à droite des zones de texte, permettant aux utilisateurs de redimensionner la taille de la zone de texte simplement en cliquant dessus et en déplaçant la souris.
Ce n'est pas un secret que WebKit a un privilège sur les autres navigateurs dans le contrôle de page et les fonctionnalités CSS. L'une de ces fonctionnalités «hidden» est la possibilité de réguler le redimensionnement de la zone de texte. Firefox a fourni la même capacité dans Firefox 4.
Comment Contrôler le Redimensionnement de Textarea Avec CSS3
Dans cet article nous allons apprendre comment faire en sorte que l'élément HTML <textarea> ait une taille fixe, non modifiable.
Pour empêcher le redimensionnement d'un champ de texte, on peut utiliser la propriété CSS resize avec sa valeur "none".
Ajoutez ce simple morceau de code à votre style textarea:
textarea {
resize: none;
}Puis vous pouvez utiliser les propriétés height et width pour définir la hauteur et la largeur fixe de votre élément textarea.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.comment {
resize: none;
height: 100px;
width: 350px;
}
</style>
</head>
<body>
<h2>Textarea avec la hauteur et la largeur fixe</h2>
<form>
<textarea class="comment">Envoyez votre commentaires à l'auteur.</textarea><br />
<input type="submit" name="submitInfo" value="Envoyer" />
</form>
</body>
</html>Ou vous pouvez fournir la taille de <textarea> simplement en définissant les attributs cols et rows en spécifiant le nombre fixe des colonnes et des lignes.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.comment {
resize: none;
}
</style>
</head>
<body>
<form>
<textarea class="comment" rows="10" cols="40">Envoyez votre commentaires à l'auteur.</textarea><br />
<input type="submit" name="submitInfo" value="Envoyer" />
</form>
</body>
</html>Vous pouvez également choisir d'autoriser les utilisateurs à redimensionner votre élément <textarea> uniquement horizontalement ou verticalement en utilisant les valeurs "vertical" ou "horizontal" de la propriété resize.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
.vertical {
resize: vertical;
}
.horizontal {
resize: horizontal;
}
</style>
</head>
<body>
<h2>Redimensionnez textarea uniquement verticalement</h2>
<form>
<textarea class="vertical" rows="8" cols="50">Envoyez votre commentaires à l'auteur.</textarea>
<h2>Redimensionnez textarea uniquementy horizontalement</h2>
<textarea class="horizontal" rows="8" cols="50">Envoyez votre commentaires à l'auteur.</textarea>
</form>
</body>
</html>Le redimensionnement de textarea est très bénéfique lorsque vous souhaitez publier un long message. Bien sûr, vous souhaiterez souvent désactiver le redimensionnement de textarea pour conserver votre conception, ce qui est également remarquable. En règle générale, vous devez toutefois autoriser le redimensionnement.