Input, Textarea, Contenteditable character limiting
by lasha
HTML
<input id="myInput" class="inputthing" value=""/>
<div style="margin-top:15px;" class="inputthing" contenteditable="true">asdkljaskldjasd</div>
<textarea class="inputthing"></textarea>
<div contenteditable="true" onkeypress="console.log(this.innerText.length); return (this.innerText.length <= 10)">asdasd</div>
<div class="simpletest" contenteditable="true">blah!!</div>
CSS
input { width: 200px; }
JavaScript
jQuery.fn.limitLen =
function(len) {
return this.each(function() {
var nodename = this.nodeName.toLowerCase();
if (nodename === "input" || nodename === "textarea") {
$(this).keyup(function() {
var $this = $(this);
if ($this.val().length > len) {
$this.val($this.val().substr(0, len));
/*var r = this.createTextRange();
r.collapse(false);
r.select();
$(this).focus();*/
}
});
} else {
$(this).keyup(function() {
var $this = $(this);
if ($this.text().length > len) {
$this.text($this.text().substr(0, len));
/*var r = this.createTextRange();
r.collapse(false);
r.select();
$(this).focus();
setTimeout(function(){
$this.focus();
},1000);
*/
}
});
}
});
};
$('.inputthing').limitLen(10);
/*$('#myInput').keyup( function() {
var $this = $(this);
if($this.val().length > 20)
$this.val($this.val().substr(0, 20));
});
*/
$('.simpletest').keyup(function(){
console.log(this);
});
$('.simpletest').focus(function(e){
setEndOfContenteditable(this);
console.log('focused');
});
function setEndOfContenteditable(contentEditableElement)
{
console.log("from setEnd func", contentEditableElement);
var range,selection;
if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
{
range = document.createRange();//Create a range (a range is a like the selection but invisible)
range.selectNodeContents(contentEditableElement);//Select the entire...