Como desabilito o resize
de um textarea
?
<textarea></textarea>
Gostaria que não desse para alterar o tamanho da caixa...
Você pode utilizar o atributo resize
para definir isso.
Para desabilitar a alteração do tamanho da textarea
você define esse valor para none
:
<textarea style="resize: none"></textarea>
Ainda há uma maneira de limitar o resize
em apenas uma direção (ou vertical, ou horizontal).
Exemplos:
Somente Vertical:
<textarea style="resize: vertical"></textarea>
Somente: Horizontal:
<textarea style="resize: horizontal"></textarea>
resize: both
Commented
26/10/2020 às 19:23
Setando a priopriedade resize
para none
.
Ex.: (Todos os TextArea
)
textarea {
resize: none;
}
<textarea></textarea>
Ex.: Definindo por classe
.resize-none {
resize: none;
}
<textarea class="resize-none"></textarea>
A propriedade resize
controla como um elemento pode ser redimensionado pelo usuário clicando e arrastando o canto inferior direito do elemento.
$('button').on('click', function() {
$('p').css('resize', $(this).text());
});
body {
background-color: #1D1F1F;
}
section {
width: 50%;
margin: 0 auto;
}
p {
width: 100%;
height: 5em;
background-color: white;
padding: .5em;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<button>both</button>
<button>horizontal</button>
<button>vertical</button>
<button>none</button>
<p class="resize">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel neque nec magna lacinia commodo in vel ante. Aliquam tincidunt, purus sit amet congue placerat, lacus mauris rhoncus nisl, nec ornare libero purus eget augue. In sed dui placerat nisl cursus aliquet. Integer nisl lorem, maximus et viverra non, aliquet vel arcu. Cras ullamcorper, arcu id molestie scelerisque, est turpis interdum mauris, sit amet pretium mi lectus at metus. Phasellus ornare odio in ipsum faucibus, et tempus est porttitor. Nullam sollicitudin eleifend mi at semper. Vivamus vel neque nec magna lacinia commodo in vel ante. Aliquam tincidunt, purus sit amet congue placerat, lacus mauris rhoncus nisl, nec ornare libero purus eget augue.</p>
</section>
Veja mais detalhes aqui neste artigo(en).
$('p').css('resize', $(this).text())
está sendo alterado o atributo do textarea
na media em que você clica nos botões,(both, horizontal, vertical e none);