Para ello nos vamos a valer del plugin elastic de jQuery, que hace que nuestros textareas crezcan en base al tamaño del texto escrito. Además, capturaremos el evento de pulsado de la tecla Intro para el envío del comentario. Al igual que en Facebook, permitiremos que la combinación de teclas Shift+Intro realice un salto de línea.


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Facebook-like elastic textarea :: by alexsuch</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
  <script type='text/javascript' src="http://jquery-elastic.googlecode.com/svn/trunk/jquery.elastic.source.js"></script>
  <style type='text/css'>
      html{
        background-color: #cecece;
      }

      #wrap {
        padding: 25px;
      }

      textarea {
        border: 1px solid black;
        background-color: #fff;
      }
  </style>
  <script type='text/javascript'>
    $(window).load(function(){
        $('.my-textarea').keypress(function(e) {
            if (e.keyCode == 13 && !e.shiftKey) {
                e.preventDefault();
                alert('sending comment...');
            }
        });

        $('.my-textarea').elastic();
    }
  </script>
</head>
<body>
  <div id="wrap">
    <textarea class="my-textarea" placeholder="Shift+Enter breaks line, Enter sends form" cols="20" rows="5"></textarea>
</div>
</body>
</html>

Podemos verlo en funcionamiento en este enlace.

Anuncios