web-dev-qa-db-fra.com

Désactiver le redimensionnement de textarea

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.

htmltextarea
114
Wizard

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/

240
feco

cela fera votre travail 

  textarea{
        resize:none;
    }

enter image description here

19
Raab

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

Voir la démo

7
Oriol

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

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

La valeur par défaut est true.

3
Thusitha Wickramasinghe

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

2
Darlesson
//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

0
nobody

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";
0
Mano