Disable line breaking by pressing enter with javascript

Asked

Viewed 773 times

0

imagine the twitter!! has that text box and a character limit, as you type the character counter drops and when you pass the limit disables the post button, the tbm button is disabled if you have not typed anything. That’s what the code below does!! i wanted to put for when the enter key was pressed the button of the post was activated and I could, but it also gives a line break that allows the person to send blank messages, I wanted to disable the line break by pressing 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>

Running the code snippet I think it will be more understandable what I did, I need to disable line breaking by pressing enter and avoid blank posts.

jquery javascript

2 answers

1


To stop breaking the line and posting blank, do the following:

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;
}

  • he stopped giving the line break, vlw msm!! but still put blank messages

  • I made the correction of the code and now no longer put blank!

  • It worked tbm !! I had solved using a second if too but with the function . Trim() as I commented in the of Fabio there above

0

On the line var post = $('.status-box').val(); , change to var post = $('.status-box').val().trim();

It will remove all empty spaces before you have anything written. Then see better https://api.jquery.com/jQuery.trim/

  • didn’t work, I guess. Trim() does not resolve what at the moment q enter key it already considers a character typed and already set blank what was typed, think q disable line break can be more efficient

  • Then create a checker. If $('.status-box'). val(). Trim() === '' { //lock/disable post button }

  • worked!! used the Return false plus the checker you suggested: if(code == 13) { if ($('.status-box').val().Trim() === '' ) { Return false; } Else { ai it enters the function };

Browser other questions tagged jquery javascript

You are not signed in. Login or sign up in order to post.