Limiting character input when using an existing textarea using jQuery

Here is the code I use in my project:

Be sure to set

var txtarea

var txtcount

var max

Here is a demo video (I set the JS to 5 even though the description says 1500 because i didnt feel like typing 1500 characters, although i will set my max to 1500 for my end product) - https://www.youtube.com/watch?v=mrrfY15bTGY&hd=1

$(document).ready(function() {

	var opts = {
	  container: 'epiceditor',
	  textarea: 'description',
	  basePath: 'http://mysite.com/js/EpicEditor',
	  clientSideStorage: false,
	  useNativeFullscreen: true,
	  parser: marked,
	  theme: {
	    base: '/themes/base/epiceditor.css',
	    preview: '/themes/preview/github.css',
	    editor: '/themes/editor/epic-light.css'
	  },
	  button: {
	    preview: true,
	    fullscreen: false,
	    bar: true
	  },
	  focusOnLoad: false,
	  shortcut: {
	    modifier: 18,
	    fullscreen: 70,
	    preview: 80
	  },
	  string: {
	    togglePreview: 'Toggle Preview Mode',
	    toggleEdit: 'Toggle Edit Mode',
	    toggleFullscreen: 'Enter Fullscreen'
	  },
	  autogrow: false
	}
	var editor = new EpicEditor(opts).load();

	var txtarea = 'description'; // Enter in the id of your textarea
	var txtcount = 'limitDesc'; // Enter in the id of your span element that will display countdown
	var max = 5; // Enter in the maximum characters (no quotes)
	// DO NOT EDIT BELOW THIS LINE
	var txtcountColor = $('#'+txtcount).css('color'); // get current counter color so we can restore after we change it	
	$('#'+txtcount).text(max+' characters left'); // Display max on page load
	$('#'+txtarea).on('keyup', function () {
			var input = $(this);
	    input.on('keyup', function() {
	        setTimeout(function() {
	        	var len = input.val().length;
	        	if (len >= max)
	        	{
	        		$('#'+txtcount).text('You have reached the limit!').css({'color':'#ff0000'});
	        		var editorBody = editor.getElement('editor').body;
	        		var editorContent = (editorBody.innerText || editorBody.textContent);
	        		var editorContentBeforeMax = editorContent.substr(0, max);
	        		$('#'+txtarea).val(editorContentBeforeMax);
	        		editor._setupTextareaSync();
					var iframe1 = document.querySelector("iframe");
					var innerDoc1 = iframe1.contentDocument;
					var iframe2 = innerDoc1.querySelector("iframe");
					idoc = iframe2.contentDocument;
					ibody = idoc.body;
					var sel = idoc.getSelection();
					sel.collapse(false);
	        	} else {
	        		var char = max - len;
	        		$('#'+txtcount).text(char + ' characters left').css({'color':txtcountColor});
	        	}
	        },4);
	    });
	});
	editor.on('update', function(){
	    $('#'+txtarea).trigger('keyup');    
	});

});

then in your document, you would have something resembling this

<!-- Text input-->
<div class="form-group">
	<label class="col-md-12 control-label" for="description">Enter a description for your object. (1500 character MAX)<br>Format: plain text or markdown (click here for markdown guide)<span id="limitDesc" style="float:right;"></span></label>
	<div class="col-md-12">
		{{ Form::textarea('description', Input::old('description'), array('class' => 'form-control input-md','placeholder' => 'Description', 'id' => 'description', 'style' => 'display:none')) }}
		<div id="epiceditor"></div>
	</div>
</div>

P.S. - This is my implementation using Laravel. Be sure to apply display:none; to your original textarea.

The only thing I could not figure out was when Max characters were reached, put cursor back at the end of the text (although this is not an issue with IE (10 at least)), so I set it so when max character was reached to unfocus the area. not doing so would have put the cursor at the beginning and if another key was typed it would prepend the text and push off the characters on the end.

If you can figure out how to get the 'caret' to the end after text is limited let me know! [email protected]

Also, this is just client-side validation, be sure to implement server-side validation as well.

Enjoy!