Jump to content
Sign in to follow this  
Insanity

Textarea adaptável

Recommended Posts

Hey pessoal, como vai?

 

Estou criando uma aplicação e preciso criar uma textarea adaptável ao que o usuário escreve. Explicando: Ela não teria o resize do usuário, e também não teria o scroll, a ideia é o usuário ir digitando e a textarea ir se expandindo verticalmente. Se não ficou muito claro, o comportamento é igual o de atualizar status do Facebook.

 

Acho que não deve ter uma solução somente com as propriedades da textarea, já coloquei resize: none, já usei overflow, nada! Quem souber como, ficaria grato!

Share this post


Link to post
Share on other sites

Insanity,

Preparei uma DEMO com o que pediu. Veja abaixo o código utilizado para tal:

HTML

<textarea name="textarea" id="textarea"></textarea>

CSS

textarea {
  width: 300px;
  min-height: 30px;
  max-height: auto;
  resize: none;
  overflow: hidden;
}

jQuery 2.2.4

$('#textarea').keyup(function() {
   newHeight(this);
});

function newHeight(element) {
   if ( !$(element).prop('scrollTop') ) {
      do {
         var a = $(element).prop('scrollHeight');
         var b = $(element).height();
      
         $(element).height(b - 5);
      }
      while ( a && ( a != $(element).prop('scrollHeight') ) );
   };
  
   // Mude o valor + 30 para qualquer um que desejar.
   $(element).height($(element).prop('scrollHeight') + 30);
};

newHeight($('#textarea'));

Vá digitando um textão que tu vai ver o height dele ir aumentando.

Abraços!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By xdxddxd
      olá pessoal se puderem tirar essa minha duvida rápidinho eu agradeço.
      ainda tem como usar o font awesome por link invés de manter ele na maquina local ? se sim, podem me passar o link ?
      estou fazendo uma aplicação delphi usando o lazarus e o raudus, porem ainda não sei muito bem como referenciar um item local por isso quero puxar as coisas direto de seus devidos servidores.
      obrigado pela atenção.
    • By maretones
      Boa tarde,
      Estou aprendendo desenvolvimento Web, no momento html e CSS. Estou fazendo uma página básica para um trabalho do curso, inseri uma imagem no topo e logo abaixo inseri um menu horizontal, mas acima do menu fica uma bordinha com a cor do plano de fundo. Eu gostaria de juntar o menu com o final da imagem, já tentei diversas maneiras e nada.
       
      Podem me ajudar?
       
      Segue o código:
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>História Halloween</title> <style> body { margin:0 100px; background-color: #000000; color: #000000; text-align: justify; } .mae { background-color: #ff9933; } .conteudo { padding: 2% 8%; } h1, h2, h3 { text-align: center; } .menu ul{ margin: 0; background-color: #ff5544; list-style-type: none; text-align: center; } .menu ul li{ display: inline; } .menu ul li a{ font-size:26px; padding:2px 30px; display: inline-block; text-decoration: none; } </style> </head> <body> <div class="mae"> <img src="images/cemitery02.jpg" alt="logo" width="100%" height="500px"> <nav class="menu"> <ul> <li><a href="">História</a></li> <li><a href="">Curiosidades</a></li> <li><a href="">Filmes</a></li> <li><a href="">À definir</a></li> <li><a href="">À definir</a></li> </ul> </nav>  
    • By granderodeo
      Olá, estou aprendendo a desenvolver lojas virtuais, e queria saber como fazer uma página igual com conteúdos diferentes, típicos das lojas virtuais. Por exemplo ao clicar sobre um produto ir para a página com conteúdo referente aquele produto que eu cliquei. Sou iniciante em PHP, desde já agradeço a quem me ajudar.
       
      página verproduto.php
      <?php require_once('config/include.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body>   <style>     p{       color: black;     }     </style> <p><?php echo isset( $_SESSION['product_name'] ) ? $_SESSION['product_name']: "" ?></p> </body> </html>  
      página inicial do site index.php
       <div class="row mt-2">         <?php         include 'carrinho/config_car.php';         $stmt = $conn->prepare("SELECT * FROM product");         $stmt->execute();         $result = $stmt->get_result();         while($row = $result->fetch_assoc()):         ?>         <div class="col-sm-6 col-md-4 col-lg-3 mb-2">             <div class="card-deck">                <div class="card p-2 border-secondary mb-2">               <a href="verproduto.php"><img src="<?= $row['product_image']; ?>" class="card-img-top"></a>                                  <h6 class="text-light bg-danger text-center rounded p-1"><?= $row['promo']; ?></h6>                             <p class="text-center">                 <?= $row['product_name']; ?><br>                 </p>                 <h4 class="card-title text-center">Por : R$<?=  $row['product_price'] ?></h4>                 <form accept-charset="utf-8" action="" class="form-submit">                   <input type="hidden" class="pid" value="<?= $row['id'] ?>">                   <input type="hidden" class="pname" value="<?= $row['product_name'] ?>">                   <input type="hidden" class="pprice" value="<?=$row['product_price']?>">                   <a href="#"><input type="hidden" class="pimage" value="<?= $row['product_image'] ?>"></a>                   <input type="hidden" class="pcode" value="<?= $row['product_code'] ?>">                   <button class="btn btn-success btn-block addItemBtn"><i class="fa fa-shopping-cart"></i> Adicionar ao Carrinho</button>                 </form>                </div>              </div>         </div>   <?php endwhile; ?>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.