Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter-like Textbox Character Count with inline alert

I would like to have a textbox character "count up" that will increase the count as a user types and display a text alert when the user crosses the required character but still allows user to continue typing.

like image 571
Jay Smoke Avatar asked Dec 22 '22 08:12

Jay Smoke


2 Answers

If you want to roll your own

HTML

<div>
  Type text here:
  <input type="text" id="txt" />
</div>
<div id="warning" style="color: red; display: none">
  Sorry, too much text.
</div>
<br>
<input type="text" id="counter" disabled="disabled" value="0"/>

Script

$("#txt").keyup(function () {
    var i = $("#txt").val().length;
    $("#counter").val(i);
    if (i > 10) {
        $("#warning").show()
    } else {
        $("#warning").hide()
    }
});

JSFiddle here

like image 150
njr101 Avatar answered Dec 23 '22 21:12

njr101


You can check this plugins http://plugins.jquery.com/plugin-tags/character-counter

like image 31
Nimit Dudani Avatar answered Dec 23 '22 20:12

Nimit Dudani