textarea like in twitter
Проверка на количество введенных символов и выделение цветом набранного сверх нормы.
by Евгений
HTML
<form>
<div>
<textarea></textarea>
<span></span>
</div>
<input type="submit" value="Отправить">
</form>
JavaScript
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
if (typeof window.getSelection != "undefined") {
var range = window.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
var textRange = document.selection.createRange();
var preCaretTextRange = document.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
function moveToEnd(target) {
var rng, sel;
if ( document.createRange ) {
rng = document.createRange();
rng.selectNodeContents(target);
rng.collapse(false);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange( rng );
} else {
var rng = document.body.createTextRange();
rng.moveToElementText( target );
rng.collapse(false);
rng.select();
}
}
function setCursorPos (tar,pos) {
if ( document.createRange ) {
var rng = document.createRange();
rng.setStart(tar.childNodes[0], pos);
rng.collapse(true);
var sel= window.getSelection();
sel.removeAllRanges();
sel.addRange(rng);
} else {
//var rng = document.body.createTextRange();
//rng.moveStart ("", pos);
//rng.collapse(true);
//rng.select();
var range = document.body.createTextRange();
range.moveEnd('character', pos+1);
range.moveStart('character', pos+1);
range.collapse(true);
range.select();
}
}
var form = document.getElementsByTagName('form')[0],
txt = form.children[0].children[0],
spn = form.children[0].children[1],
...