А вот без JQuery.
<!doctype html>
<html>
<head>
<style type = "text/css">
.exceed {
color: gray;
text-decoration: line-through;
}
div.textbox {
background-color: #eee;
}
</style>
</head>
<body>
<div id = "textbox" class = "textbox" contenteditable></div>
<script>
(function (div, maxLength) {
var span = document.createElement("span"), text;
span.className = "exceed";
span.contentEditable = true;
div.onkeyup = function () {
if (div.innerText.length + span.innerText.length> maxLength) {
text = div.innerText
div.innerHTML = text.substr(0, maxLength);
span.innerText = text.substr(maxLength);
div.appendChild(span);
} else {
div.innerText += span.innerText;
span.innerText = "";
}
}
})(document.getElementById("textbox"), 5)
</script>
</body>
</html>
На кроссбраузерность не проверял (работет в Chrome).
ksa, однако и у вас и у меня код обладает побочным эффектом: курсор скачет в начало строки. Ничего ввести нельзя нормально. У вас постоянно скачет, а у меня с момента переполнения.
В связи с этим хотелось бы поднять вот
этот пост.