Example of character counter using Bootstrap and jQuery - The Red Penguin

HOME ABOUT SITEMAP BLOG LOGIN

Example of character counter using Bootstrap and jQuery

It helps to get the scripts in the right order!

<html>

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
<div class="col-sm-6">
<b>Example of character counter using Bootstrap and jQuery</b><br /><br />
<form accept-charset="UTF-8" action="" method="POST">
<textarea class="form-control" id="text" name="text" maxlength="200" placeholder="Type in your message" rows="5"></textarea>
<span class="pull-right label label-default" id="count_message" style="background-color: smoke; margin-top: 120px;"></span><br />
<button class="btn btn-info" type="submit">Post New Message</button>
</form>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script>
var text_max = 200;
$('#count_message').html('0 / ' + text_max );

$('#text').keyup(function() {
var text_length = $('#text').val().length;
var text_remaining = text_max - text_length;
$('#count_message').html(text_length + ' / ' + text_max);
});
</script>

</body>

</html>

Saturday 19 February 2022, 385 views

Next post: How to get rid of “episodes and shows” from Spotify:
Previous post: How to create a simple Twitter bot

Leave a Reply Cancel reply

Programming index