Desative o redimensionamento da área de texto

117

Estou tentando desligar o redimensionamento de textarea em meu site; agora estou usando este método:

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

Sei que meu método não está correto e estou procurando um melhor em JavaScript. Sou iniciante, então a melhor solução para mim será HTML5 ou jQuery.

html textarea

— bruxo
fonte

253

Experimente este CSS para desativar o redimensionamento

O CSS para desativar o redimensionamento para todas as áreas de texto tem a seguinte aparência:

textarea {
    resize: none;
}

Em vez disso, você poderia apenas atribuí-lo a uma única textarea por nome (onde está o textarea HTML):

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

Ou por id (onde textarea HTML está):

#foo {
    resize: none;
}

Retirado de: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

— feco
fonte

7

Em vez de apenas criar um link para uma solução, você deve explicar um pouco aqui. Muitas outras pessoas olhando para esta pergunta no futuro não se darão ao trabalho de clicar em um link para obter uma resposta. Adicione alguns detalhes aqui e eu marcarei sua resposta com +1.

— Jon Egeland

21

isso vai fazer o seu trabalho

  textarea{
        resize:none;
    }

insira a descrição da imagem aqui

— Raab
fonte

8

CSS3 pode resolver esse problema. Infelizmente, ele só é compatível com 60% dos navegadores usados atualmente.

Para IE e iOS, você não pode desativar o redimensionamento, mas pode limitar a textareadimensão configurando seu widthe height.

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

Veja a demonstração

— Oriol
fonte

2

Isso pode ser feito facilmente usando apenas o atributo draggable html

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

O valor padrão é verdadeiro.

— Assimitha Wickramasinghe
fonte

2

A questão é redimensionar a área de texto, não arrastar e soltar. Portanto, como esperado, definir este atributo em uma textarea não funciona no Chrome (pelo menos).

— peveuve de

2

Apenas uma opção extra, se você deseja reverter o comportamento padrão para todas as áreas de texto no aplicativo, você pode adicionar o seguinte ao seu CSS:

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

E faça o seguinte para habilitar onde deseja redimensionar:

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

Tenha em mente que esta solução pode não funcionar em todos os navegadores que você deseja oferecer suporte. Você pode verificar a lista de suporte para resizeaqui: http://caniuse.com/#feat=css-resize

— Darlesson
fonte

1

De acordo com a pergunta, listei as respostas em javascript

Selecionando TagName

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

Selecionando 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
}

o código acima funciona na maioria dos navegadores

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

faça ambos para que funcione no número máximo de navegadores

— ninguém
fonte

0

Isso funciona para mim

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

Expandir trecho

— Kordrad
fonte