Come posso disabilitare la proprietà ridimensionabile di una textarea?

2650

Voglio disabilitare la proprietà ridimensionabile di a textarea.

Attualmente, posso ridimensionare un textareafacendo clic sull'angolo in basso a destra del textareae trascinando il mouse. Come posso disabilitarlo?

html css

— user549757
fonte

4

@JDIsaaks - inoltre, consentire il ridimensionamento in determinate situazioni può interrompere il layout e la stampa (un aspetto importante di un progetto mission-critical attuale).

— random_user_name

10

A volte vuoi davvero una textarea non ridimensionabile. Ad esempio, in questo caso, quando stai (in modo condizionale) converti un'area di testo in qualcosa che assomiglia a un'etichetta. Sembra davvero strano avere un'etichetta con un grabber galleggiante casuale a lato.

— neminem,

2

Per l'amore di tutto ciò che è buono, per favore non farlo su una textarea reale o alienerai i tuoi utenti esperti. La funzionalità principale del browser dovrebbe essere considerata un'opzione nucleare.

— superluminario

3532

La seguente regola CSS disabilita il comportamento di ridimensionamento per gli textareaelementi:

textarea {
  resize: none;
}

Per disabilitarlo per alcune (ma non tutte) textareas, ci sono un paio di opzioni .

Per disabilitare uno specifico textareacon l' nameattributo impostato su foo(cioè, <textarea name="foo"></textarea>):

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

Oppure, usando un idattributo (cioè, <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

La pagina W3C elenca i possibili valori per il ridimensionamento delle restrizioni: nessuna, entrambe, orizzontale, verticale ed eredita:

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

Esamina una pagina di compatibilità decente per vedere quali browser supportano attualmente questa funzione. Come ha commentato Jon Hulka, le dimensioni possono essere ulteriormente contenute nei CSS usando max-width, max-height, min-width e min-height.

Super importante sapere:

Questa proprietà non fa nulla a meno che la proprietà di overflow non sia qualcosa di visibile, che è l'impostazione predefinita per la maggior parte degli elementi. Quindi generalmente per usarlo, dovrai impostare qualcosa come overflow: scroll;

Citazione di Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

— Ciambella
fonte

Esiste una soluzione per Firefox, Opera e / o IE?

— Šime Vidas

6

@ Šime IE e FF3 (e precedenti) non aggiungono il ridimensionamento del supporto, quindi non è necessaria una soluzione per loro. Per FF4, questa soluzione dovrebbe funzionare.

— Ciambella

24

come da davidwalsh.name/textarea-resize - usa ridimensiona: verticale o ridimensiona: orizzontale per vincolare il ridimensionamento a una dimensione. Oppure usa una larghezza massima, un'altezza massima, una larghezza minima e un'altezza minima.

— Jon Hulka,

3

Sono l'unico che trova strano impostare questo usando CSS e non gli attributi? Perché non posso quindi impostare disabilitato o controllato o altre proprietà usando CSS ...

— Buksy

6

@Buksy Perché "disabled" è uno stato, non una proprietà visiva. Quindi è logico che non dovrebbe essere deciso da un linguaggio di stile .

— Kroltan,

206

Nel CSS ...

textarea {
    resize: none;
}

— Jeff Parker
fonte

105

Ho trovato due cose:

Primo

textarea{resize: none}

Questo è un CSS 3, che non è stato ancora rilasciato , compatibile con Firefox 4 (e versioni successive), Chrome e Safari .

Un'altra caratteristica del formato è quella overflow: autodi sbarazzarsi della barra di scorrimento destra, tenendo conto dell'attributo dir .

Codice e diversi browser

HTML di base

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

Alcuni browser

Internet Explorer 8

Inserisci qui la descrizione dell'immagine

Firefox 17.0.1

Inserisci qui la descrizione dell'immagine

Cromo

Inserisci qui la descrizione dell'immagine

— Rami Jamleh
fonte

62

CSS 3 ha una nuova proprietà per gli elementi dell'interfaccia utente che ti permetterà di farlo. La proprietà è la proprietà di ridimensionamento . Quindi aggiungere quanto segue al foglio di stile per disabilitare il ridimensionamento di tutti gli elementi textarea:

textarea { resize: none; }

Questa è una proprietà CSS 3; usa una tabella di compatibilità per vedere la compatibilità del browser.

Personalmente, troverei molto fastidioso avere il ridimensionamento disabilitato sugli elementi textarea. Questa è una di quelle situazioni in cui il designer sta cercando di "rompere" il client dell'utente. Se il tuo disegno non può contenere un'area di testo più grande, potresti voler riconsiderare come funziona il tuo disegno. Qualsiasi utente può aggiungere textarea { resize: both !important; }al foglio di stile dell'utente per sovrascrivere le tue preferenze.

— James Sumners
fonte

Ma quello sarebbe l'utente che rompesse intenzionalmente il loro layout, piuttosto che un utente che ha solo bisogno di ridimensionare il suo / lei texareae finisce per fare qualcosa che non funziona

— Programmi Redwolf

25

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

— Imtiaz Ali Baigal
fonte

21

Se hai bisogno di un supporto profondo, puoi usare una tecnica vecchia scuola:

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
fonte

7

Utilizzare anche resize:nonecon questa soluzione per evitare che la maniglia compaia nell'angolo in basso che frustrantemente non funziona.

— MacroMan,

13

Questo può essere fatto facilmente in HTML:

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

Questo funziona per me. Il valore predefinito è trueper l' draggableattributo.

— Thusitha Wickramasinghe
fonte

Questo è un attributo HTML 5, quindi saranno supportati solo i browser più recenti. Ho letto da qualche parte che IE lo supporta dalle 9 in poi.

— Antony D'Andrea,

4

Questo funziona nella maggior parte dei browser. in ogni browser più recente.

— Thusitha Wickramasinghe il

non impedirà il ridimensionamento di textarea

— Mishko Vladimir,

@ AntonyD'Andrea Questo non funziona sull'ultimo Chrome: jsfiddle.net/ps2v8df9

— Advait Junnarkar

6

Per disabilitare la proprietà di ridimensionamento, utilizzare la seguente proprietà CSS:

resize: none;

Puoi applicare questo come una proprietà di stile inline in questo modo:
```
<textarea style="resize: none;"></textarea>
```
o tra i <style>...</style>tag degli elementi in questo modo:
```
textarea {
    resize: none;
}
```

— Webeng
fonte

6

Devi semplicemente usare: resize: none;nel tuo CSS.

La proprietà di ridimensionamento specifica se un elemento è ridimensionabile o meno dall'utente.

Nota: la proprietà di ridimensionamento si applica agli elementi il cui valore di overflow calcolato è diverso da "visibile".

Anche il ridimensionamento non è attualmente supportato in Internet Explorer.

Ecco diverse proprietà per il ridimensionamento:

Nessun ridimensionamento:

textarea {
  resize: none;
}

Ridimensiona in entrambi i modi (verticale e orizzontale):

textarea {
  resize: both;
}

Ridimensiona verticalmente:

textarea {
  resize: vertical;
}

Ridimensiona in orizzontale:

textarea {
  resize: horizontal;
}

Anche se hai widthe heightnel tuo CSS o HTML, impedirà il ridimensionamento della tua area di testo, con un supporto più ampio per i browser.

— Alireza
fonte

3

CSS 3 può risolvere questo problema. Sfortunatamente al giorno d'oggi è supportato solo dal 60% dei browser usati .

Per Internet Explorer e iOS non puoi disattivare il ridimensionamento, ma puoi limitare la textareadimensione impostando il suo widthe height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

Vedi la demo

— Oriol
fonte

3

Puoi semplicemente disabilitare la proprietà textarea in questo modo:

textarea {
    resize: none;
}

Per disabilitare il ridimensionamento verticale o orizzontale , utilizzare

resize: vertical;

o

resize: horizontal;

— Peter Mortensen
fonte

2

Ho creato una piccola demo per mostrare come funzionano le proprietà di ridimensionamento. Spero che possa aiutare te e gli altri.

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

Espandi frammento

— Ambuj Khanna
fonte

1

Con @style, puoi dargli una dimensione personalizzata e disabilitare la funzione di ridimensionamento (resize: none;).

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

— Carlos de Jesus Baez
fonte

1

Ciao, grazie per la tua risposta, la prossima volta ti preghiamo di formattare il codice.

— Baptiste Mille-Mathias,

Questa è la risposta basata su asp.net MVC. Molto bella.

— Yogihosting il

0

Puoi provare anche con jQuery

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

— Santosh Khalse
fonte

3

Dovresti usare più jquery . Non lo stai usando abbastanza. :)

— Filip Savic,

1

È un meme , ad es. "Dovresti lasciar perdere e provare jQuery". .

— Peter Mortensen,

0

Per disabilitare il ridimensionamento per tutti i textareas:

textarea {
    resize: none;
}

Per disabilitare il ridimensionamento per uno specifico textarea, aggiungi un attributo nameo un ide impostalo su qualcosa. In questo caso, è chiamatonoresize

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
fonte

-2

L'aggiunta lo !importantfa funzionare:

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

outline è solo per evitare il contorno blu su alcuni browser.

— kaelds
fonte

6

Non abusare !importantdell'attributo. Non ha senso correggere la larghezza e l'altezza se l'attributo CSS resize: nonepuò rimuovere la funzione di ridimensionamento

— Raptor

1

Non è !importantmale?

— Peter Mortensen,

Nell'attuale Chrome questo interrompe il ridimensionamento orizzontale, ma posso comunque ridimensionare textarea verticalmente.

— Advait Junnarkar,