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, 251 views
Next post: How to get rid of “episodes and shows” from Spotify: Previous post: How to create a simple Twitter bot
Programming index
- General PHP code snippets
- Date and time utilities in PHP
- How to get rid of “episodes and shows” from Spotify:
- Example of character counter using Bootstrap and jQuery
- How to create a simple Twitter bot
- Finding the first and last day of a month in PHP
- Javascript countdown timer
- Creating a WordPress theme from scratch
Leave a Reply