contentEditable elements

Min/Max contentEditable elements

by moob

HTML

HERE ARE SOME <div contenteditable="true" name="choice1" class="textfield" max="15" min="1" placeholder="EDITABLE">EDITABLE</div> AND NON-EDITABLE A<div contenteditable="true" name="choice1" class="textfield" max="3">RE</div>AS. <div contenteditable="true" name="choice1" class="textfield" max="30" min="14">I HAVE NO IDEA</div> WHY I'M SHOUTING!

CSS

.textfield {display:inline-block; min-width:.5em; color:red; text-transform:uppercase; background-color:#ffeeff;
position:relative;}
.textfield:before {
    content: ' ';
    position:absolute;
    top:-3px;
    left:-3px;
	width: 0; 
	height: 0; 
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;	
	border-top: 3px solid #f00;
}
.textfield:after {
    content: ' ';
    position:absolute;
    bottom:-3px;
    right:-3px;
	width: 0; 
	height: 0; 
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;	
	border-bottom: 3px solid #f00;
}

JavaScript

var textfields = document.getElementsByClassName("textfield"); 
for(i=0; i<textfields.length; i++){
    textfields[i].addEventListener("keydown", function(e) {
        var keycode = (window.event)?window.event.keyCode:e.which;
        var deleting = (keycode == 8 || keycode == 46);
        if((this.innerHTML.length >= this.getAttribute("max") && !deleting) || (deleting && this.innerHTML.length<=this.getAttribute("min"))){
            e.preventDefault();
        }
    }, false);
}