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.