A Twitter-like text input that alerts you to some sort of text limit.
A Pen by Geoffrey Bell on CodePen.
<div id="ta" contentEditable="true"></div> |
var ta = document.getElementById("ta"); | |
ta.addEventListener("keyup", foo, false); | |
function foo(e) { | |
var text = e.target.innerText; | |
if (text.length >= 10) { | |
f = text.slice(0,10); | |
str = f + "<em>" + text.slice(10) + "</em>"; | |
e.target.innerHTML = str; | |
range = document.createRange(); | |
range.selectNodeContents(ta); | |
range.collapse(false); | |
selection = window.getSelection(); | |
selection.removeAllRanges(); | |
selection.addRange(range); | |
} | |
} |
div { | |
border: 1px solid black; | |
width: 200px; | |
height: 100px; | |
overflow-y: scroll; | |
overflow-x: hidden; | |
line-break: word; | |
} | |
em { | |
font-style: normal; | |
color: red; | |
} |
A Twitter-like text input that alerts you to some sort of text limit.
A Pen by Geoffrey Bell on CodePen.