Désactiver le redimensionnement de la zone de texte

J'essaye de désactiver le redimensionnement de zone de texte 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 j'en cherche une meilleure en JavaScript. Je suis un débutant, donc la meilleure solution pour moi sera HTML5 ou jQuery.

Essayez ce CSS pour désactiver le redimensionnement

Le CSS pour désactiver le redimensionnement pour toutes les zones de texte ressemble à ceci:

textarea {
    resize: none;
}

Vous pouvez à la place l'attribuer à une seule zone de texte par son nom (où se trouve le HTML de la zone de texte):

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

Ou par id (où se trouve le HTML textarea):

#foo {
    resize: none;
}

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

cela fera votre travail

  textarea{
        resize:none;
    }

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 la textareadimension en définissant son widthet height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

Voir la démo

Cela peut être fait facilement en utilisant simplement l'attribut html draggable

<textarea name="mytextarea" draggable="false"></textarea>

La valeur par défaut est true.

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

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

Et procédez comme suit pour activer l'endroit où vous souhaitez redimensionner:

<textarea resize="true"></textarea>

Gardez à l'esprit que cette solution peut ne pas fonctionner dans tous les navigateurs que vous souhaitez peut-être prendre en charge. Vous pouvez consulter la liste de support resizeici: http://caniuse.com/#feat=css-resize

Selon la question, j'ai répertorié les réponses en javascript

En sélectionnant TagName

document.getElementsByTagName('textarea')[0].style.resize = "none";

En sélectionnant Id

document.getElementById('textArea').style.resize = "none";

//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

le code ci-dessus fonctionne sur la plupart des navigateurs

//HTML:
<textarea id='textarea' draggable='false'></textarea>

faites les deux pour qu'il fonctionne sur le nombre maximum de navigateurs

Cela fonctionne pour moi

<textarea
  type='text'
  style="resize: none"
>
Some text
</textarea>