Désactiver le redimensionnement de la zone de texte

117

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.

html textarea

— sorcier
source

254

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/

— feco
source

7

Au lieu de simplement créer un lien vers une solution, vous devriez l'expliquer un peu ici. Beaucoup d'autres personnes qui se pencheront sur cette question à l'avenir n'auront pas la peine de cliquer sur un lien pour obtenir une réponse. Ajoutez quelques détails ici et je donnerai +1 à votre réponse.

— Jon Egeland

21

cela fera votre travail

  textarea{
        resize:none;
    }

entrez la description de l'image ici

— Raab
source

8

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

— Oriol
source

2

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.

— Thusitha Wickramasinghe
source

2

La question est de redimensionner la zone de texte, pas de glisser-déposer. Donc, comme prévu, définir cet attribut sur une zone de texte ne fait pas l'affaire dans Chrome (au moins).

— peveuve

2

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

— Darlesson
source

1

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

— Mano
source

0

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

— personne
source

0

Cela fonctionne pour moi

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

Développer l'extrait

— Kordrad
source