imagine twitter !! you have that text box and a character limit, as you type the character count goes down and when you pass the limit disable the post button, the tbm button is disabled if nothing is typed. That's what the code down does !! I wanted to put in when the enter key was pressed the button of the post was activated and I managed, but it also gives a line break that allows the person to send messages in white, wanted to disable the line break when 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><!DOCTYPEhtml><htmllang="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 wrapping by pressing enter and avoiding blank posts.