Comment désactiver la propriété redimensionnable d'une zone de texte?

2650

Je souhaite désactiver la propriété redimensionnable d'un fichier textarea.

Actuellement, je peux redimensionner un textareaen cliquant sur le coin inférieur droit de textareaet en faisant glisser la souris. Comment puis-je désactiver cela?

html css user549757
la source

4

@JDIsaaks - en outre, autoriser le redimensionnement dans certaines situations peut casser la mise en page et l'imprimabilité (un aspect important d'un projet critique actuel).

random_user_name

10

Parfois, vous voulez vraiment une zone de texte non redimensionnable. Par exemple, dans ce cas, lorsque vous convertissez (conditionnellement) une zone de texte en quelque chose qui ressemble à une étiquette. Il semble vraiment étrange d'avoir une étiquette avec un grappin flottant aléatoire sur le côté.

neminem

2

Pour l'amour de tout ce qui est bon, veuillez ne pas le faire sur une zone de texte réelle ou vous aliénerez vos utilisateurs avancés. Briser la fonctionnalité principale du navigateur devrait être considéré comme une option nucléaire.

superluminaire le

3532

La règle CSS suivante désactive le comportement de redimensionnement des textareaéléments:

textarea {
  resize: none;
}

Pour le désactiver pour certains (mais pas tous) textarea, il existe quelques options .

Pour désactiver un spécifique textareaavec l' nameattribut défini sur foo(c'est- à -dire <textarea name="foo"></textarea>):

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

Ou, en utilisant un idattribut (c.-à-d. <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

La page W3C répertorie les valeurs possibles pour les restrictions de redimensionnement: aucune, les deux, horizontale, verticale et hérite:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Consultez une page de compatibilité décente pour voir quels navigateurs prennent actuellement en charge cette fonctionnalité. Comme Jon Hulka l'a commenté, les dimensions peuvent être encore plus restreintes en CSS en utilisant max-width, max-height, min-width et min-height.

Super important à savoir:

Cette propriété ne fait rien sauf si la propriété overflow est autre chose que visible, ce qui est la valeur par défaut pour la plupart des éléments. Donc, généralement, pour utiliser cela, vous devrez définir quelque chose comme débordement: défilement;

Citation de Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

Donut
la source

Existe-t-il une solution pour Firefox, Opera et / ou IE?

Šime Vidas

6

@ Šime IE et FF3 (et versions antérieures) n'ajoutent pas de redimensionnement de prise en charge, donc aucune solution n'est nécessaire pour eux. Pour FF4, cette solution devrait fonctionner.

Donut

24

selon davidwalsh.name/textarea-resize - utilisez resize: vertical ou resize: horizontal pour contraindre le redimensionnement à une dimension. Ou utilisez n'importe quelle largeur max, hauteur max, largeur min et hauteur min.

Jon Hulka

3

Suis-je le seul à trouver bizarre de définir cela en utilisant CSS et non des attributs? Pourquoi ne puis-je pas définir les propriétés désactivées ou vérifiées ou d'autres propriétés en utilisant CSS ...

Buksy

6

@Buksy Parce que "désactivé" est un état, pas une propriété visuelle. Il est donc logique que cela ne soit pas décidé par un langage de style .

Kroltan

206

En CSS ...

textarea {
    resize: none;
}

Jeff Parker
la source

105

J'ai trouvé deux choses:

Première

textarea{resize: none}

Il s'agit d'un CSS 3, qui n'est pas encore publié , compatible avec Firefox 4 (et versions ultérieures), Chrome et Safari .

Une autre fonctionnalité de formatage consiste à overflow: autose débarrasser de la barre de défilement droite, en tenant compte de l' attribut dir .

Code et différents navigateurs

HTML de base

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Certains navigateurs

Internet Explorer 8

Entrez la description de l'image ici

Firefox 17.0.1

Entrez la description de l'image ici

Chrome

Entrez la description de l'image ici

Rami Jamleh
la source

62

CSS 3 a une nouvelle propriété pour les éléments d'interface utilisateur qui vous permettra de le faire. La propriété est la propriété de redimensionnement . Vous devez donc ajouter ce qui suit à votre feuille de style pour désactiver le redimensionnement de tous les éléments de zone de texte:

textarea { resize: none; }

Il s'agit d'une propriété CSS 3; utilisez un tableau de compatibilité pour voir la compatibilité du navigateur.

Personnellement, je trouverais très ennuyeux d'avoir le redimensionnement désactivé sur les éléments de la zone de texte. Il s'agit de l'une de ces situations où le concepteur tente de "casser" le client de l'utilisateur. Si votre conception ne peut pas accueillir une zone de texte plus grande, vous voudrez peut-être reconsidérer le fonctionnement de votre conception. Tout utilisateur peut ajouter textarea { resize: both !important; }à sa feuille de style utilisateur pour remplacer votre préférence.

James Sumners
la source

Mais ce serait l'utilisateur qui casse intentionnellement sa mise en page, plutôt qu'un utilisateur qui a juste besoin de redimensionner son / sa texareaet finit par faire quelque chose qui ne fonctionne pas

Redwolf Programs

25

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

Imtiaz Ali Baigal
la source

21

Si vous avez besoin d'un soutien approfondi, vous pouvez utiliser une technique à l'ancienne:

textarea {
    max-width: /* desired fixed width */ px;
    min-width: /* desired fixed width */ px;
    min-height: /* desired fixed height */ px;
    max-height: /* desired fixed height */ px;
}

yevgeniy
la source

7

Utilisez également resize:nonecette solution pour éviter que la poignée n'apparaisse dans le coin inférieur, ce qui ne fonctionne pas de manière frustrante.

MacroMan

13

Cela peut être fait facilement en HTML:

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

Cela fonctionne pour moi. La valeur par défaut est truepour l' draggableattribut.

Thusitha Wickramasinghe
la source

Il s'agit d'un attribut HTML 5, donc seuls les nouveaux navigateurs le prendront en charge. J'ai lu quelque part qu'IE le prend en charge à partir de 9 heures.

Antony D'Andrea

4

Cela fonctionne dans la plupart des navigateurs. dans chaque dernier navigateur.

Thusitha Wickramasinghe,

cela n'empêchera pas le redimensionnement de la zone de texte

Mishko Vladimir

@ AntonyD'Andrea Cela ne fonctionne pas sur le dernier Chrome: jsfiddle.net/ps2v8df9

Advait Junnarkar

6

Pour désactiver la propriété de redimensionnement, utilisez la propriété CSS suivante:

resize: none;

Vous pouvez soit l'appliquer en tant que propriété de style en ligne comme ceci:
```
<textarea style="resize: none;"></textarea>
```
ou entre les <style>...</style>balises d'élément comme ceci:
```
textarea {
    resize: none;
}
```

Webeng
la source

6

Vous utilisez simplement: resize: none;dans votre CSS.

La propriété resize spécifie si un élément est redimensionnable ou non par l'utilisateur.

Remarque: La propriété resize s'applique aux éléments dont la valeur de débordement calculée est autre que "visible".

Redimensionner également non pris en charge dans Internet Explorer pour le moment.

Voici différentes propriétés de redimensionnement:

Pas de redimensionnement:

textarea {
  resize: none;
}

Redimensionnez les deux façons (verticalement et horizontalement):

textarea {
  resize: both;
}

Redimensionner verticalement:

textarea {
  resize: vertical;
}

Redimensionner horizontalement:

textarea {
  resize: horizontal;
}

De plus, si vous en avez widthet heightdans votre CSS ou HTML, cela empêchera le redimensionnement de votre zone de texte, avec une prise en charge plus large des navigateurs.

Alireza
la source

3

CSS 3 peut résoudre ce problème. Malheureusement, il n'est supporté que sur 60% des navigateurs utilisés de nos jours.

Pour Internet Explorer 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
la source

3

Vous pouvez simplement désactiver la propriété textarea comme ceci:

textarea {
    resize: none;
}

Pour désactiver le redimensionnement vertical ou horizontal , utilisez

resize: vertical;

ou

resize: horizontal;

Peter Mortensen
la source

2

J'ai créé une petite démo pour montrer comment fonctionnent les propriétés de redimensionnement. J'espère que cela vous aidera ainsi que les autres.

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}

<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

Développer l'extrait

Ambuj Khanna
la source

1

Avec @style, vous pouvez lui donner une taille personnalisée et désactiver la fonction de redimensionnement (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

Carlos de Jesus Baez
la source

1

Bonjour, merci pour votre réponse, la prochaine fois veuillez formater le code.

Baptiste Mille-Mathias

C'est la réponse basée sur MVC asp.net. Très agréable.

yogihosting

0

Vous pouvez également essayer avec jQuery

$('textarea').css("resize", "none");

Santosh Khalse
la source

3

Vous devriez utiliser plus de jquery . Vous ne l'utilisez pas assez. :)

Filip Savic

1

C'est un mème - par exemple, "Vous devriez totalement laisser tomber cela et essayer jQuery." .

Peter Mortensen

0

Pour désactiver le redimensionnement pour tous les textareas:

textarea {
    resize: none;
}

Pour désactiver le redimensionnement pour un élément spécifique textarea, ajoutez un attribut name, ou un idet définissez-le sur quelque chose. Dans ce cas, il est nomménoresize

HTML

<textarea name='noresize' id='noresize'> </textarea>

CSS

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}

Abk
la source

-2

L'ajout !importantfait fonctionner:

width:325px !important; height:120px !important; outline:none !important;

outline est juste pour éviter le contour bleu sur certains navigateurs.

kaelds
la source

6

N'abusez pas de l' !importantattribut. Inutile de fixer la largeur et la hauteur si l'attribut CSS resize: nonepeut supprimer la fonction de redimensionnement

Raptor

1

N'est-ce pas !importantmal?

Peter Mortensen du

Dans Chrome actuel, cela arrête le redimensionnement horizontal, mais je peux toujours redimensionner la zone de texte verticalement.

Advait Junnarkar

Comment désactiver la propriété redimensionnable d'une zone de texte?

Réponses:

Super important à savoir:

Code et différents navigateurs

HTML

CSS