Left Characters Counter

HTML

<div>
  <label>Title</label>
  <p id="remain-title"></p>
  <input type="text" placeholder="Enter Title" maxlength="500"/>
</div>
<br>
<hr>
<br>
<div>
  <label>Description</label>
  <p id="remain-description"></p>
  <textarea placeholder="Enter custom description" rows="4" maxlength="500"></textarea>
</div>

JavaScript

// text input maximum lenght
	$(document).on('keydown keyup paste', 'input[type=text]', function(e) {
	  var textArea = $('input[type=text]').val(),
	    textLenght = textArea.length,
	    limit = $('textarea').attr('maxlength'),
	    remain = 'left ' + parseInt(limit - textLenght) + ' chars';
	  $('#remain-title').text(remain);
	  if (textLenght > 500) {
	    $('textarea').val((textArea).substring(0, limit))
	  }
	});
  
  // tex area maximum lenght
	$(document).on('keydown keyup paste', 'textarea', function(e) {
	  var textArea = $('textarea').val(),
	    textLenght = textArea.length,
	    limit = $('textarea').attr('maxlength'),
	    remain = 'left ' + parseInt(limit - textLenght) + ' chars';
	  $('#remain-description').text(remain);
	  if (textLenght > 500) {
	    $('textarea').val((textArea).substring(0, limit))
	  }
	});