Désactiver le redimensionnement de la zone de texte

J’essaie de désactiver le redimensionnement de 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 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 simplement l’atsortingbuer à une seule zone de texte par nom (où se trouve le HTML textarea):

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

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

 #foo { resize: none; } 

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

cela fera votre travail

  textarea{ resize:none; } 

entrer la description de l'image ici

CSS3 peut résoudre ce problème. Malheureusement, il n’est supporté 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 dimension textarea en définissant sa width et sa 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 simplement en utilisant l’atsortingbut HTML draggable

  

La valeur par défaut est true.

Juste une option supplémentaire, si vous souhaitez annuler le comportement par défaut pour toutes les zones de texte dans l’application, vous pouvez append ce qui suit à votre CSS:

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

Et procédez comme suit pour activer le redimensionnement souhaité:

  

N’oubliez pas que cette solution peut ne pas fonctionner dans tous les navigateurs que vous souhaitez prendre en charge. Vous pouvez consulter la liste de support pour le resize ici: http://caniuse.com/#feat=css-resize

 //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:  

faire les deux pour que cela fonctionne sur le nombre maximum de navigateurs

Selon la question, j’ai listé 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";