Como desabilito a propriedade redimensionável de uma área de texto?

2650

Eu quero desativar a propriedade redimensionável de a textarea.

Atualmente, posso redimensionar um textareaclicando no canto inferior direito textareado mouse e arrastando o mouse. Como posso desativar isso?

html css

— user549757
fonte

4

@JDIsaaks - além disso, permitir o redimensionamento em determinadas situações pode interromper o layout e a capacidade de impressão (um aspecto importante de um projeto de missão crítica atual).

— random_user_name 23/11

10

Às vezes, você realmente deseja uma área de texto não redimensionável. Por exemplo, nesse caso, quando você está (condicionalmente) convertendo uma área de texto em algo que se parece com um rótulo. Parece realmente estranho ter um rótulo com uma garra flutuante aleatória bem ao lado.

— Nemem

2

Pelo amor de tudo que é bom, não faça isso em uma área de texto real ou você alienará seus usuários avançados. A quebra da funcionalidade principal do navegador deve ser considerada uma opção nuclear.

— superluminar 30/01

3532

A seguinte regra CSS desabilita o comportamento de redimensionamento de textareaelementos:

textarea {
  resize: none;
}

Para desativá-lo para alguns (mas não todos) textareas, existem algumas opções .

Para desativar um específico textareacom o nameatributo definido como foo(ou seja, <textarea name="foo"></textarea>):

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

Ou, usando um idatributo (ou seja <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

A página do W3C lista os valores possíveis para as restrições de redimensionamento: nenhum, ambos, horizontal, vertical e herdado:

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

Revise uma página de compatibilidade decente para ver quais navegadores atualmente suportam esse recurso. Como Jon Hulka comentou, as dimensões podem ser mais restringidas no CSS usando max-width, max-height, min-width e min-height.

Super importante saber:

Essa propriedade não faz nada, a menos que a propriedade overflow seja algo diferente de visível, que é o padrão para a maioria dos elementos. Então, geralmente, para usar isso, você terá que definir algo como overflow: scroll;

Citação de Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

— Rosquinha
fonte

Existe uma solução para Firefox, Opera e / ou IE?

— Šime Vidas

6

@ Šime IE e FF3 (e versões anteriores) não adicionam redimensionamento de suporte, portanto, não é necessária uma solução para eles. Para o FF4, esta solução deve funcionar.

— Donut

24

conforme davidwalsh.name/textarea-resize - use redimensionar: vertical ou redimensionar: horizontal para restringir o redimensionamento a uma dimensão. Ou use qualquer largura máxima, altura máxima, largura mínima e altura mínima.

— precisa

3

Eu sou o único que acha estranho definir isso usando css e não atributos? Por que não posso, em seguida, definir desativado ou marcada ou outras propriedades usando CSS ...

— Buksy

6

@ BuuSky Porque "desativado" é um estado, não uma propriedade visual. Portanto, é lógico que não deve ser decidido por uma linguagem de estilo .

— Kroltan 8/09/16

206

Em CSS ...

textarea {
    resize: none;
}

— Jeff Parker
fonte

105

Eu encontrei duas coisas:

Primeiro

textarea{resize: none}

Este é um CSS 3, que ainda não foi lançado , compatível com Firefox 4 (e posterior), Chrome e Safari .

Outro recurso de formato é overflow: autolivrar-se da barra de rolagem correta, levando em consideração o atributo dir .

Código e navegadores diferentes

HTML básico

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

Alguns navegadores

Internet Explorer 8

Digite a descrição da imagem aqui

Firefox 17.0.1

Digite a descrição da imagem aqui

cromada

Digite a descrição da imagem aqui

— Rami Jamleh
fonte

62

O CSS 3 tem uma nova propriedade para elementos da interface do usuário que permitirá que você faça isso. A propriedade é a propriedade redimensionar . Portanto, você adicionaria o seguinte à sua folha de estilo para desativar o redimensionamento de todos os elementos da área de texto:

textarea { resize: none; }

Esta é uma propriedade CSS 3; use uma tabela de compatibilidade para ver a compatibilidade do navegador.

Pessoalmente, eu consideraria muito irritante ter o redimensionamento desativado nos elementos da área de texto. Essa é uma daquelas situações em que o designer está tentando "interromper" o cliente do usuário. Se o seu design não puder acomodar uma área de texto maior, convém reconsiderar como ele funciona. Qualquer usuário pode adicionar textarea { resize: both !important; }à folha de estilo do usuário para substituir sua preferência.

— James Sumners
fonte

Mas isso seria o usuário quebrando intencionalmente sua disposição, ao invés de um usuário que só precisa de redimensionar his / her texareae acaba fazendo algo não trabalho

— RedWolf Programas

25

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

— Imtiaz Ali Baigal
fonte

21

Se você precisar de suporte profundo, poderá usar uma técnica da velha escola:

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

Use também resize:nonecom esta solução para evitar que a alça apareça no canto inferior, o que frustrantemente não funciona.

— Macroman

13

Isso pode ser feito em HTML facilmente:

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

Isso funciona para mim. O valor padrão é truepara o draggableatributo

— Assim é um Wickramasinghe
fonte

Este é um atributo HTML 5, portanto, apenas navegadores mais novos serão compatíveis. Eu li em algum lugar que o IE suporta a partir de 9 em diante.

— Antony D'Andrea

4

Isso funciona na maioria dos navegadores. em todos os navegadores mais recentes.

— Thusitha Wickramasinghe

isso não impedirá textarea de redimensionar

— Mishko Vladimir

@ AntonyD'Andrea Isso não está funcionando no Chrome mais recente: jsfiddle.net/ps2v8df9

— Advait Junnarkar

6

Para desativar a propriedade redimensionar, use a seguinte propriedade CSS:

resize: none;

Você pode aplicar isso como uma propriedade de estilo embutido da seguinte maneira:
```
<textarea style="resize: none;"></textarea>
```
ou entre as <style>...</style>tags de elemento da seguinte forma:
```
textarea {
    resize: none;
}
```

— Webeng
fonte

6

Você simplesmente usa: resize: none;no seu CSS.

A propriedade redimensionar especifica se um elemento é ou não redimensionável pelo usuário.

Nota: A propriedade redimensionar se aplica a elementos cujo valor de estouro calculado é algo diferente de "visível".

Redimensionar também não é suportado no Internet Explorer no momento.

Aqui estão diferentes propriedades para redimensionar:

Sem redimensionamento:

textarea {
  resize: none;
}

Redimensione para os dois lados (vertical e horizontalmente):

textarea {
  resize: both;
}

Redimensionar verticalmente:

textarea {
  resize: vertical;
}

Redimensionar horizontalmente:

textarea {
  resize: horizontal;
}

Além disso, se você tiver widthe heightem seu CSS ou HTML, isso impedirá que sua área de texto seja redimensionada, com um suporte mais amplo aos navegadores.

— Alireza
fonte

3

CSS 3 pode resolver esse problema. Infelizmente, é suportado apenas em 60% dos navegadores usados atualmente .

Para o Internet Explorer e iOS, não é possível desativar o redimensionamento, mas você pode limitar a textareadimensão definindo widthe height.

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

Ver demonstração

— Oriol
fonte

3

Você pode simplesmente desativar a propriedade textarea como esta:

textarea {
    resize: none;
}

Para desativar o redimensionamento vertical ou horizontal , use

resize: vertical;

ou

resize: horizontal;

— Peter Mortensen
fonte

2

Eu criei uma pequena demonstração para mostrar como as propriedades de redimensionamento funcionam. Espero que ajude você e outras pessoas também.

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

Expandir snippet

— Ambuj Khanna
fonte

1

Com @style, você pode atribuir um tamanho personalizado e desativar o recurso de redimensionamento (resize: none;).

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

— Carlos de Jesus Baez
fonte

1

Olá, obrigado pela resposta. Da próxima vez, formate o código.

— Baptiste Mille-Mathias

Esta é a resposta baseada no asp.net MVC. Muito agradável.

— yogihosting 27/12/18

0

Você pode tentar com o jQuery também

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

— Santosh Khalse
fonte

3

Você deve usar mais jquery . Você não está usando o suficiente. :)

— Filip Savic

1

É um meme - por exemplo, "Você deve deixar isso totalmente de lado e tentar o jQuery". .

— Peter Mortensen

0

Para desativar o redimensionamento para todos os textareas:

textarea {
    resize: none;
}

Para desativar o redimensionamento de um específico textarea, adicione um atributo nameou um ide defina-o como algo. Nesse caso, é nomeadonoresize

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

Adicionar !importantfaz funcionar:

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

outline é apenas para evitar o contorno azul em determinados navegadores.

— kaelds
fonte

6

Não abuse do !importantatributo. Sentido de corrigir a largura e altura se o atributo CSS resize: nonepode remover o recurso de redimensionamento

— Raptor

1

Não é !importantmau?

— Peter Mortensen

No Chrome atual, isso interrompe o redimensionamento horizontal, mas ainda posso redimensionar a área de texto verticalmente.

— Advait Junnarkar