JSFiddle - React, Tailwind, and code Playground
HTML
<textarea class="comment-text" cols="30" rows="10" placeholder="enter your comment"></textarea>
<button class="btn-post">post</button>
<ul class="posts">
</ul>
CSS
.disabled {
cursor: not-allowed;
pointer-events: none;
opacity: 0.65;
}
JavaScript
$(".comment-text").keydown(function (e) {
if (e.which === 13) {
$("this.form").submit();
return false;
}
});
$('.comment-text').keydown(function (event) {
var post = $(".comment-text").val();
if (event.which === 13) {
$("<li>").text(post).appendTo(".posts");
$(".comment-text").val("");
}
});
/*#############Disable enter when there is no text##############*/
$(".comment-text").keydown(function(e) {
var post = $(".comment-text").val();
if (e.which === 13 && e.target.value === ""){
e.preventDefault();
e.cancelBubble = true;
console.log(e);}}, true);
$(".comment-text").keydown(function(e){
if(e.which === 13)console.log($("<li>").text(post).appendTo(".posts")); });
/*##################################################*/
$(".btn-post").click(function () {
var post = $(".comment-text").val();
$("<li>").text(post).appendTo(".posts");
$(".comment-text").val("");
$(".btn-post").addClass("disabled");
});
$(".comment-text").keyup(function () { /*disable button when there is no text in comment-text */
var postlength = $(".comment-text").val().length;
if (postlength === 0) {
$(".btn-post").addClass("disabled");
} else if (postlength <= 0) {
$(".btn-post").addClass("disabled");
} else {
$(".btn-post").removeClass("disabled");
}
});
$(".btn-post").addClass("disabled");