<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<input id="test1" maxlength="10">
<p id="test2"></p>
input{width:400px;height:100px;}
$(document).ready(function(){
var max_value = 10;
$('#test2').html(max_value +' text remain')
$('#test1').keyup(function(){
var text_length= $('#test1').val().length;
var text_remain= max_value - text_length;
$('#test2').html(text_remain +' text remain')
})
});
