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 adriano.eurich
      cadastro.php <?php session_start(); include_once 'includes/header.inc.php'; include_once 'includes/menu.inc.php'; ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <form action="banco_de_dados/create.php" method="post" class="col s12"> <fieldset class="formulario" style="padding: 1px;"> <legend><!--<img src="imagens/CadCli.png" alt="[imagem]" style="width:40x; height:40px">--></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <!-- Campo Nome --> <div class="input-field col s12"> <i class="material-icons prefix">account_circle</i> <input type="text" name="nome" id="nome" maxlength="40" required autofocus> <label for="nome">Nome</label> </div> <!-- Campo Instituição --> <div class="input-field col s12"> <i class="material-icons prefix">account_balance</i> <input type="text" name="inst" id="inst" maxlength="40" required autofocus> <label for="inst">Instituição</label> </div> <!-- Campo Telefone --> <div class="input-field col s12"> <i class="material-icons prefix">phone</i> <input type="text" name="telefone" id="telefone" maxlength="13" required> <label for="telefone">Telefone</label> </div> <!-- Campo Chave --> <div class="input-field col s12"> <i class="material-icons prefix">vpn_key</i> <input type="text" name="chave" id="chave" maxlength="4" required> <label for="chave">Chave</label> </div> <!-- Botões --> <div class="input-field col s12"> <input type="submit"style="width:120px; height:37px" value="cadastrar" class="btn blue"> <input type="reset" style="width:120px; height:37px" value="limpar" class="btn red"> </div> </fieldset> </form> </div> <?php include_once 'includes/script.inc.php';?> ------------------------- create.php <?php session_start(); include_once 'conexao.php'; $id = $_POST [ 'id' ]; $nome = $_POST [ 'nome' ]; $inst = $_POST [ 'inst' ]; $data = date('y-m-d'); $telefone = $_POST [ 'telefone' ]; $chave = $_POST [ 'chave' ]; $queryInsert = $link->query("insert into tb_cadastro VALUES ('".$id."', '".$nome."','".$inst."','".$data."','".$telefone."','".$chave."')"); $affected_rows = mysqli_affected_rows($link); if($affected_rows > 0): $_SESSION['msg'] = "<p class='center green-text'>".'Cadastrado com Sucesso!'."<br>"; header("Location: ../cadastro.php"); endif; --------------- relatorio.php <?php session_start(); include_once 'includes/header.inc.php'; include_once 'includes/menu.inc.php'; ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <p>&nbsp;</p> <form action="banco_de_dados/consulta_rel.php" method="post" class="col s12"> <fieldset class="formulario" style="padding: 3px"> <legend><img src="imagens/relatorio.png" alt="[imagem]" style="width:55px; height:45px"></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <!-- Campo Data --> <div class="input-field col s12"> <i class="material-icons prefix">event_available</i> <input type="date" name="datainicial" id="data" maxlength="10" required> <label for="data">Data Inicial</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">event_busy</i> <input type="date" name="datafinal" id="data" maxlength="10" required> <label for="data">Data Final</label> </div> <!-- Botões --> <div class="input-field col s12"> <input type="submit"style="width:120px; height:37px" value="Gerar" class="btn blue"> <input type="reset" style="width:120px; height:37px" value="limpar" class="btn red"> </div> </fieldset> </form> </div> <?php include_once 'includes/footer.inc.php';?> <?php include_once 'includes/script.inc.php'; ----------------- arquivo_rel.php ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <p>&nbsp;</p> <fieldset class="formulario" style="padding: 5px"> <legend><img src="imagens/relatorio.png" alt="[imagem]" style="width:55px; height:45px"></legend> <br> <?php if(isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <table class="highlight" > <thead> <tr> <th>Nome</th> <th>Instituição</th> <th>Data</th> </tr> </thead> </table> </fieldset> </div> <?php include_once 'includes/footer.inc.php';?> <?php include_once 'includes/script.inc.php'; --------------- consulta_rel.php <?php session_start(); include_once 'conexao.php'; $datainicial = $_POST [ 'datainicial' ]; $datafinal = $_POST [ 'datafinal' ]; $sql= "select * from tb_cadastro where data between '$datainicial' and '$datainicial'"; $consulta_rel = mysqli_query($link, $sql); echo "sql"; if($consulta_rel) { ////// $_SESSION['msg'] = "<p class='center green-text'>".'Devolução efetuada com Sucesso!'."<br>"; header("Location: ../arquivo_rel.php"); exit(); } Alguma dica de como eu posso, mostrar os dados do cadastro, quando abro a pagina relatório e coloco as datas para consulta
    • By jcvlanova
      Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada com linhas curvas que circundam os tópicos da página, alguém saberia me dizer como é possível fazer essas linhas curvas numa página html ???
    • By paulo.xmx
      alguem pode me ajudar, sou novo e estou con site adulto e preciso programação para códigos HTML
      uma vez que trata-se de um site de conteúdo restrito. preciso visualizar as etapas para incluir um código HTML e criar a barra
       de consentimento para maiores de 18 anos
    • By Carcleo
      Tenho um botão, que pega a primeira li da ul e joga ela para a ultima posição ininterruptamente e assim eu faço um efeito de slideshow.
       
      HTML:
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <ul> <li> Slide 1 </li> <li> Slide 2 </li> <li> Slide 3 </li> <li> Slide 4 </li> </ul> <button id="back"> BACK </button> <button id="next"> NEXT </button> </div> CSS:
      * { margin: 0; padding: 0; } body { display: flex; width: 1000px; margin: 0 auto; } .slider { position: relative; display: flex; flex-direction: column; width: 1000px; height: 200px; overflow: hidden; border: 1px solid #000; } .slider > ul { display: flex; flex-wrap: wrap; width: 5000px; } .slider > ul > li { display: flex; justify-content: center; width: 500px; height: 150px; margin: 10px; } .slider > ul > li:hover { cursor: crosshair; } .slider > button { position: absolute; display: flex; justify-content: center; top: calc(45% - 15px); width: 30px; height: 30px; opacity: 0.2; } .slider > button:hover { opacity: 1; cursor: pointer; } .slider > button#back { left: 10px; } .slider > button#next { right: 10px; } .animacao { animation-duration: 4s; animation-name: identifier; } @keyframes identifier { 0% { right: 0; } 50% { right: 50%;} 75% { right: 75%; } 100% { right: 100%; } } JQUERY:
      function intervalo () { $(".slider > #next").click (); } var interval = setInterval(intervalo,4000); $(".slider > ul > li") .mouseover(function(){ clearInterval(interval); }) .mouseout(function(){ interval = setInterval(intervalo,4000); }) .addClass("animacao"); $(".slider > #back").click ( function(){ var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última $(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira }); $(".slider > #next").click ( function(){ var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira $(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última }); Tudo funciona bem.
      Mas estou tentando adicionar um efeito de transição tipo quando as lis mudarem de posição, elas correrem da direita para a esquerda em vez de aparecerem abruptamente.
       
      Será que tem como?
       
       
    • By opl12
      Olá mestres
       
      Tenho uma página em HTML que está no servidor Xampp.
      Tem como eu executar/chamar para abrir um arquivo, seja uma planilha, seja um PPT, ou seja um EXE sem que eu faça o download?
       
      ou seja, ao clicar no link ele já abra o arquivo sem que faça o download?
       
       
×

Important Information

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