Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
​
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
  
function text_counter (input_text, target) {
  var max = 20;//$(input_text).attr("maxlength");
    $(input_text).keydown (function () {
      var text = $(input_text).val();
      var current = text.length;
      $(target).text(current + "/" + max);
    });
}               
text_counter ("#description", "#description_counter");
  
function text_counter2 (input_text, target) {
  var max = 30;//$(input_text).attr("maxlength");
    $(input_text).keydown (function () {
      var text = $(input_text).val();
      var current = max - text.length;
      $(target).text(current + "/" + max);
    });
}               
text_counter2 ("#description2", "#description_counter2");
​
});
</script>
​
  <input id="description" type="text"  maxlength="20" value="Default text" >
<span id="description_counter"></span>
  
  <input id="description2" type="text"  maxlength="30" value="Default text" >
<span id="description_counter2"></span>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers