Como desabilito o resize
de um textarea
?
<textarea></textarea>
Gostaria que não desse para alterar o tamanho da caixa...
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeVocê 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
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);