0

imagine o twitter!! tem aquela caixa de texto e um limite de caracteres, conforme vai digitando o contador de caracteres desce e ao passar do limite desabilita o botão de postar, o botão tbm fica desabilitado se não tiver nada digitado. É isso que o código a baixo faz !! eu queria colocar para quando a tecla enter fosse pressionada o botão do post fosse ativado e consegui, porem ele também da uma quebra de linha que permite a pessoa mandar mensagens em branco, queria desativar a quebra de linha ao pressionar enter !!

var main = function() {
 <!-- postando ao clicar no botão -->
  $('.btn').click(function() {
    var post = $('.status-box').val();
    $('<li>').text(post).prependTo('.posts');
    $('.status-box').val('');
    $('.counter').text('500');
    $('.btn').addClass('disabled'); 
  });
  
<!-- postando ao pressionar enter -->
  $('.status-box').keypress(function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 13) { 
      var post = $('.status-box').val();
      $('<li>').text(post).prependTo('.posts');
      $('.status-box').val('');
      $('.counter').text('500');
      $('.btn').addClass('disabled');
      $(this).parents('form').find('.btn').trigger('click');
    }
  });

<!-- contador de caracteres -->
  $('.status-box').keyup(function() {
    var postLength = $(this).val().length;
    var charactersLeft = 500 - postLength;
    $('.counter').text(charactersLeft);

    if(charactersLeft < 0) {
      $('.btn').addClass('disabled'); 
    }
    else if(charactersLeft == 500) {
      $('.btn').addClass('disabled');
    }
    else {
      $('.btn').removeClass('disabled');
    }
  });

  $('.btn').addClass('disabled');
}

$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Devaneios Suínos</title>

    <!-- Bootstrap -->
    <link href="style.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <div class="container">
        <form>
            <div class="form-group">
              <textarea class="form-control status-box" rows="2" placeholder="digite algo"></textarea>
            </div>
          </form>
          <div class="button-group pull-right">
            <p class="counter">500</p>
            <a href="#" class="btn btn-primary">Post</a>
          </div>
         <ul class="posts">
          </ul>
        </div>

      
      <!-- plugins -->
      <script src="js/jquery.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/app.js"></script>
    </div>
      </body>
</html>

Executando o trecho do código acho que ficara mais compreensível o que eu fiz, preciso desabilitar quebra de linha ao pressionar enter e evitar posts em branco.

2 Respostas 2

1

Pra parar de quebrar a linha e postar em branco, faça o seguinte:

if(code == 13) { 
    var post = $('.status-box').val();
    if( post.length > 0 ) {
        $('<li>').text(post).prependTo('.posts');
        $('.status-box').val('');
        $('.counter').text('500');
        $('.btn').addClass('disabled');
        $(this).parents('form').find('.btn').trigger('click');
    }
    return false;
}
3
  • ele parou de dar a quebra de linha, vlw msm!! mas ainda posta mensagens em branco
    – user27399
    1/07/2016 às 18:34
  • Fiz a correção do código e agora não posta mais em branco! 1/07/2016 às 19:24
  • Funcionou tbm !! eu tinha resolvido usando um segundo if também mas com a função .trim() como comentei no do fabio ali em cima
    – user27399
    1/07/2016 às 19:30
0

Na linha var post = $('.status-box').val(); , mude para var post = $('.status-box').val().trim();

Ele irá remover todos os espaços vazios antes de ter algo escrito. Depois veja melhor https://api.jquery.com/jQuery.trim/

3
  • não funcionou, acho o .trim() não resolve oq no momento q tecla enter ele já considera um caracter digitado e já posta em branco o que foi digitado, acho q desabilitar a quebra de linha pode ser mais eficiente
    – user27399
    1/07/2016 às 18:27
  • Então, criar um verificador. Se $('.status-box').val().trim() === '' { //bloquear/desativar botão post } 1/07/2016 às 18:37
  • funcionou !! usei o return false mais o verificador que vc sugeriu: if(code == 13) { if ($('.status-box').val().trim() === '' ) { return false; } else { ai ele entra na função };
    – user27399
    1/07/2016 às 18:51

Você deve fazer log-in para responder a esta pergunta.