Désactivez le redimensionnement de la zone de texte

Question

Je suis en train d'essayer de désactiver le redimensionnement du textarea sur mon site ; en ce moment, j'utilise cette méthode :

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

Je sais que ma méthode n'est pas correcte et je recherche une meilleure en JavaScript. Je suis débutant, donc la meilleure solution pour moi sera HTML5 ou jQuery.

Answer 1

Essayez ce CSS pour désactiver le redimensionnement

Le CSS pour désactiver le redimensionnement de tous les textareas ressemble à ceci:

textarea {
    resize: none;
}

Vous pourriez plutôt l'attribuer à un seul textarea par nom (où le textarea HTML est):

textarea[nom=foo] {
    resize: none;
}

Ou par id (où le textarea HTML est):

#foo {
    resize: none;
}

Extrait de: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

Answer 2

Cela fera votre travail

  textarea{
        resize:none;
    }

Answer 3

Le CSS3 peut résoudre ce problème. Malheureusement, il n'est pris en charge que sur 60% des navigateurs utilisés de nos jours.

Pour IE et iOS, vous ne pouvez pas désactiver le redimensionnement, mais vous pouvez limiter les dimensions du textarea en définissant sa largeur et sa hauteur.

/* On peut également activer/désactiver un axe spécifique. Par défaut, les deux sont activés. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

Voir la démo

Answer 4

Cela fonctionne pour moi

Certain texte

Answer 5

Juste une option supplémentaire, si vous souhaitez rétablir le comportement par défaut pour tous les textarea de l'application, vous pourriez ajouter ce qui suit à votre CSS :

textarea:not([resize="true"]) {
  resize: none !important;
}

Et faites ce qui suit pour activer le redimensionnement là où vous le souhaitez :

Gardez à l'esprit que cette solution pourrait ne pas fonctionner sur tous les navigateurs que vous souhaitez prendre en charge. Vous pouvez consulter la liste de prise en charge pour resize ici : http://caniuse.com/#feat=css-resize