Auto Resize para campos Textareas

autoResize é um plugin para JQuery quer permite colocar a opção de auto-escalonamento em campos de texto (textarea), se acordo com seu conteúdo, de forma que não é mostrado a famosa barra de scroll.

Como usar este Plugin

Para utilizar este plugin, é necessário baixar as bibliotecas:  jquery.js, autoresize.jquery.js, e então chama-las em nosso header:

HTML:

  1. <scripttype=“text/javascript”src=“jquery.js”></script>
  2. <scripttype=“text/javascript”src=“autoresize.jquery.js”></script>

O passo seguinte é criar nosso formulário com elementos do tipo textarea e não esquecer de atribuir a cada campo um ID, para que possamos posteriormente aplicar o método de autoresize.

HTML:

  1. <formid=“comment”method=“post”>
  2. <textareaname=“mensaje” id=“mensaje”></textarea>
  3. <inputtype=“submit”name=“bt”value=“Enviar” />
  4. </form>

Finalmente selecionamos o elemento com o ID que queremos aplicar o método, isso é simples de se fazer, basta colocar a chamada ao evento ready do JQuery:

JavaScript:

  1. $(document).ready(function () {
  2. $(‘textarea#mensaje’).autoResize();
  3. });

Pode-se ver um exemplo funcionando bem ocmo algumas propriedades adicionais diretamente no site do plugin: http://james.padolsey.com/

Leave a Reply

Your email address will not be published. Required fields are marked *