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 ThosuZ
      Olá, pessoal! Estou com problemas pra organizar meu rodapé. Quero deixar da seguinte forma: as informações de contato e um formulário lado a lado, e em baixo as informações padrões de um rodapé ("Copyright 2020 etc").
       
      Eu criei uma div pras informações de contato e outra pro formulário, setei float: left e right pra eles respectivamente, mas a terceira div (Copyright) ficou no meio, não em baixo. Como resolvo?
       
      HTML:
       
      <footer> <div class="fcenter"> <div class="infos"> <p class="ftitulo">Águia Publicidade</p> <p class="finfos">Rua Treze de Maio, 191</p> <p class="finfos">Ed. Marc Jacob, sala 504</p> <p class="finfos">(91) 99182-4761</p> <p class="finfos">contato@aguiapublicidade.com</p> </div> <div class="contato"> <p class="ftitulo">Contate-nos</p> <form action="enviar.php" method="post" class="rodape"> <p class="formu">Nome: </p><input type="text"> </form> </div> </div> <div class="copyright"> <p class="rodape">&copy; Todos os direitos reservados. Desenvolvido por Arthur, designer da Águia&reg; Publicidade.</p> </div> </footer> CSS:
      /* footer settings */ footer { background-color: #303030; color: #fff; margin: 0px -8px 0px -8px; } .fcenter { width: 500px; margin: 0 auto; } .infos { float: left; } .contato { float: right; }  
      Como ficou:

       
      Como eu gostaria que ficasse mais ou menos:
      http://miritigrafica.com.br/#faleconosco
    • By Gniusplay
      Olá pessoal, eu tenho um sistema de comentários que quando um "player" preenche esse comentário, ele vai direto para pagina inicial, funciona como um feedback, só que ele pode usar isso várias e várias vezes, eu queria que ele usasse apenas uma vez e não pudesse mais utilizar, sendo assim só seria possível usar uma vez.
      Ou q só poderia usar se tivesse x quantidades de pontos no banco de dados(eu tenho uma coluna com pontos) e a cada vez que ele usasse esse formulário(comentário), ele perderia 1 ponto,e  quando não tivesse mais pontos, ele não poderia comentar.
      Alguém tem alguma ideia de como posso fazer isso? e qual funções utilizar?
      VALEUU!!!
    • By tii3030
      Olá pessoal, desenvolvi um pequeno código em PHP com a função de verificar e validar usuário e senha de um formulário, juntamente com o meu banco de dados MySql.
      Gostaria de saber como aprimorar o meu código para torna-lo mais seguro e mais próximo de algo "profissional". Lembrando que minha senha no banco está criptografada (PASSWORD_BCRYPT).
       
      <?php
          #----------------- INCLUDING FILE --> "conf.php"
          include('conf.php');
              if (isset($_POST['submit'])) {
             
      #--------------------------------INPUTS ---------------------------------------------#
                  $email = mysqli_real_escape_string($conexao, $_POST['email']);
                  $password = mysqli_real_escape_string($conexao, $_POST['password']);
      #-----------------------#----------------------#-----------------_#-------------------#
                  $query_select_email = "SELECT email FROM usuarios WHERE email = '$email'";
                  $select_email = mysqli_query($conexao,$query_select_email);
                  $query_select_password = "SELECT password FROM usuarios";
                  $select_password = mysqli_query($conexao,$query_select_password);
                  while($array = mysqli_fetch_array($select_password)) {
                  $logarray = $array['password'];
                  
                      if (password_verify($password, $logarray)) {
                          if (mysqli_num_rows($select_email) == 1) {
                              
                          $_SESSION['email'] = $email;
                          header('location: XXX.html');
                          exit();
                          }
                      }
                      else {
                          echo "Loguin ou senha incorretos";
                      }
                  $logarray = '0';
                  }
              }
      ?>
    • By noxer
      Boa tarde, Preciso atribuir o valor de uma textarea para uma var e a exibir em um p. Fiz bem simples usando js/jquery mas agora preciso fazer em php.
       
      Ja tentei $variavel = $_POST['nomedocampo']; mas não obtive resultado
       
       
      Segue o trecho em js
      <textarea class="wapf-input" ></textarea> <button class="sendPDF">PDF</button> <p class="geratedPDF"></p>  
      $('.sendPDF').on('click', toPDF) function toPDF() { var textareaValue = $('.wapf-input').val() $('.geratedPDF').text(textareaValue) }
×

Important Information

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