Disattiva il ridimensionamento dell'area di testo

117

Sto cercando di disattivare il ridimensionamento dell'area di testo nel mio sito; in questo momento sto usando questo metodo:

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

So che il mio metodo non è corretto e ne sto cercando uno migliore in JavaScript. Sono un principiante, quindi la soluzione migliore per me sarà HTML5 o jQuery.

html textarea

— procedura guidata
fonte

253

Prova questo CSS per disabilitare il ridimensionamento

Il CSS per disabilitare il ridimensionamento per tutte le aree di testo è simile a questo:

textarea {
    resize: none;
}

Potresti invece semplicemente assegnarlo a una singola area di testo per nome (dove si trova l'HTML dell'area di testo):

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

O per id (dove si trova l'HTML dell'area di testo):

#foo {
    resize: none;
}

Tratto da: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

— FeCo
fonte

7

Invece di collegarti a una soluzione, dovresti spiegarlo un po 'qui. Molte altre persone che guarderanno a questa domanda in futuro non si preoccuperanno di fare clic su un collegamento per ottenere una risposta. Aggiungi alcuni dettagli qui e farò +1 sulla tua risposta.

— Jon Egeland

21

questo farà il tuo lavoro

  textarea{
        resize:none;
    }

inserisci qui la descrizione dell'immagine

— Raab
fonte

8

CSS3 può risolvere questo problema. Purtroppo al giorno d'oggi è supportato solo sul 60% dei browser utilizzati .

Per IE e iOS non è possibile disattivare il ridimensionamento ma è possibile limitare la textareadimensione impostandone widthe height.

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

Vedi Demo

— Oriol
fonte

2

Può essere fatto facilmente semplicemente usando l'attributo trascinabile html

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

Il valore predefinito è vero.

— Thusitha Wickramasinghe
fonte

2

La domanda riguarda il ridimensionamento dell'area di testo, non il trascinamento della selezione. Quindi, come previsto, l'impostazione di questo attributo su un'area di testo non fa il trucco in Chrome (almeno).

— peveuve

2

Solo un'opzione in più, se vuoi ripristinare il comportamento predefinito per tutte le aree di testo nell'applicazione, puoi aggiungere quanto segue al tuo CSS:

textarea:not([resize="true"]) {
  resize: none !important;
}

Ed effettua le seguenti operazioni per abilitare la posizione in cui desideri ridimensionare:

<textarea resize="true"></textarea>

Tieni presente che questa soluzione potrebbe non funzionare in tutti i browser che potresti voler supportare. Puoi controllare l'elenco di supporto per resizequi: http://caniuse.com/#feat=css-resize

— Darlesson
fonte

1

Come per la domanda, ho elencato le risposte in javascript

Selezionando TagName

document.getElementsByTagName('textarea')[0].style.resize = "none";

Selezionando Id

document.getElementById('textArea').style.resize = "none";

— Mano
fonte

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
}

il codice sopra funziona sulla maggior parte dei browser

//HTML:
<textarea id='textarea' draggable='false'></textarea>

fai entrambe le cose affinché funzioni sul numero massimo di browser

— nessuno
fonte

0

Questo funziona per me

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

Espandi lo snippet

— Kordrad
fonte