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 recherche une meilleure en JavaScript. Je suis débutant, la meilleure solution pour moi sera donc HTML5 ou jQuery.
Essayez ce CSS pour désactiver le redimensionnement
Le CSS pour désactiver le redimensionnement pour tous les textareas ressemble à ceci:
textarea {
resize: none;
}
Vous pouvez plutôt simplement l'attribuer à une seule zone de texte par son nom (où se trouve le code HTML de zone de texte):
textarea[name=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/
cela fera votre travail
textarea{
resize:none;
}
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 ses width
et height
.
/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */
Cela peut être fait facilement en utilisant simplement l'attribut html
<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 les éléments suivants à votre CSS:
textarea:not([resize="true"]) {
resize: none !important;
}
Et procédez comme suit pour activer l'emplacement de redimensionnement souhaité:
<textarea resize="true"></textarea>
Rappelez-vous que cette solution peut ne pas fonctionner dans tous les navigateurs que vous souhaitez prendre en charge. Vous pouvez consulter la liste des supports pour 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:
<textarea id='textarea' draggable='false'></textarea>
faire les deux pour que cela fonctionne sur le nombre maximum de navigateurs
Selon la question, j'ai énuméré les réponses dans javascript
En sélectionnant TagName
document.getElementsByTagName('textarea')[0].style.resize = "none";
En sélectionnant Id
document.getElementById('textArea').style.resize = "none";