Cursor shifting problem with editable divs

trying to limit the length of content in editable div, but cursor shifts when I do.

HTML

<div id="additem_title" class="textarea_area">
<div contenteditable="true" data-placeholder="what's this thing called?" data-max="20" class="textarea_text">Test title of not too long length</div>
<div class="textarea_counter"></div>
</div>

CSS

[contentEditable=true]:empty:not(:focus):before{
        content:attr(data-placeholder)
}

.textarea_area {
	position		: relative; 	/* to hold the floating element inside it */
	padding-bottom	: 3px;
  width:400px;
  height:75px;
  border:1px solid green;
  color:black;
}
.textarea_counter {
	font-size		: 13px;
  border:1px solid red;
}
.textarea_text {
 border:   1px solid blue;
  padding:10px;
  margin:10px;
}

JavaScript

$('.textarea_text').on('keyup',function() {
		var remaining = $(this).data('max') - $(this).html().length;
		if (remaining <0)
		{
			$(this).html($(this).html().slice(0,-1));		// Remove the last character
			remaining=0;
		}
		$(this).closest('.textarea_area').find('.textarea_counter').html("("+remaining+" characters remaining)");
	});