Letter Count with jQuery – JS for textarea and Input

Letter Count with jQuery – JS for textarea and Input

1. Letter Count for Textarea

To know the number of words begins to write in textarea. Remember not to spend more than 10 000 words for your sake.


 

Or Copy this -> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis reprehenderit nihil modi eius minus totam voluptatem quae, excepturi sunt fugiat, eaque reiciendis vitae itaque labore quas possimus corporis. Ullam.

2. Letter Count for Input

You can also try input. Start writing to know the amount of your ideas or your thoughts. In addition, it is allowed to copy the above text “lorem“.


 

3. Maxlength Textarea on 150 words

This property is very useful for many things. Example, if you are a webmaster you will need the users to enter a certain amount of letters so that you can execute the code well and enter ideas. Use them for what you need, if you want the code, then you can scroll down to see.


 

4. Maxlength Input on 55 words

Now you can write your ideas, but with limits, that is to say only up to 55 letters. Because it is necessary and sufficient to understand. But if you want to write more letters then you can use Now you can write your ideas, but with limits, that is to say only up to 55 letters. Because it is necessary and sufficient to understand. But if you want to write more letters then you can use the top..


 

* Code JS, HTML and CSS for Letter Count

.count-letter{
  margin: 30px 0;
  padding: 35px 10px;
  border-radius: 3px;
  background: #f1f1f1;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
}
.count-letter label{
  display: block;
  text-align: right;
  padding: 5px 10px;
}
.count-letter input{
  min-width: 100%;
}
.count-letter textarea{
  min-width: 100%;
  min-height: 120px;
}
.count-letter div{
  font-size: 15px;
  line-height: 28px;
  letter-spacing: .6px;
  word-wrap: break-word;
}
<div class="count-letter">
    <label for="demo"> <span id="count">0</span></label>
    <textarea id="demo"></textarea>
    <div id="result"></div>
</div>
$("#demo").keyup(function(){
  var count = $(this).val().length;
  var result = $(this).val();
  $("#count").html(count);
  $("#result").html(result);
});


** Code for maxlength (textarea)

For this CSS and JS can be the same, if they seem pretty, otherwise you can change it to your liking. Here is the HTML code

<div class="count-letter">
    <label for="demo"> <span id="count">0</span> / 150</label>
    <textarea id="demo" maxlength="150"></textarea>
    <div id="result"></div>
</div>

 

* About of Letter Count

All letters matter, whether they are funny or boring. All are worth, this is because they all have a message to understand thinking about it.
That’s why on this page we create an application to know the number of words that exist in our idea. Use these tools so that you can guide yourself at work or at your school, or you can also contribute more to these ideas to make it more fun and useful.

Letter Count with jQuery - JS, HTML and CSS. Discover in DEMO

Letter Count (Words)

If you like to know more about the lyrics then you can visit this page to learn more about its importance

 

Tags: , , , , geluksee