Dynamic Text limit when users writes in a textbox (HTML)

Question

I need to implement in Html/javascript (or php is possible) a script which works like twitter, when the user writes text in a field a label change showing the characters left.

Can you help me with a simple and easy script example?

score 2 · Accepted Answer · answered May 29 '10 at 19:56

2

<script>
function checkCharCount(textfield){
    if(textfield.value.length > 300) textfield.value = textfield.value.substr(0, 300);
    document.getElementById("charCounter").innerHTML = 300 - textfield.value.length;
}
</script>

<textarea class="input" name="REMARK" rows="5" cols="45" maxlength="300" wrap="virtual" onKeyUp="checkCharCount(this);"></textarea> 
<div><span id="charCounter">300</span> characters left.</div>

answered May 29 '10 at 19:56

hndcrftd

3,090
1
19
18

1

+1 for not posting 'use jQuery and the jqInputLimit plugin blah blah etc'. – karim79 May 29 '10 at 19:58
You might want to handle `cut` and `paste` events, and also maybe `mouseup` for the case when the user drags some text into the input box. – Tim Down May 29 '10 at 23:18
cut and paste with the keyboard already works with the given script, and pasting with the mouse will not allow you to paste more than 300 chars (in my example) because of maxlength="300" in the textarea (in most browsers). However that's a thoughtful consideration, Tim. – hndcrftd May 30 '10 at 02:50
Tim, you got me thinking there, and I even came across your answers at the http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser and then experimented with DOMCharacterDataModified and eventually came up with a cross-browser way which, I suspect, will be criticized, but here it is [see my second post] – hndcrftd May 31 '10 at 06:10

hndcrftd · Answer 2 · 2010-06-01T15:47:57.813

Tim Down made me curious about the methods of detecting paste where it's done with a mouse and not the keyboard. After spending an hour on the net and trial-and-error with a test-page I have this RATHER SIMPLE BUT EFFECTIVE cross-browser [as much as it gets] solution to offer, which satisfies me in functionality, but may not satisfy javascript purists in approach. (hey, just trying to help)

<head>
<script>
function checkCharCount(){
    textfield = document.getElementById('remark');
    //if(textfield.value.length > 300) // does not register length change until the next paste or keyup
    textfield.value = textfield.value.substr(0, 300);
    document.getElementById("charCounter").innerHTML = 300 - textfield.value.length;
}
</script>
</head>
<body>

<textarea id="remark" class="input" name="remark" rows="5" cols="45" wrap="virtual" onkeyup="checkCharCount();" onpaste="setTimeout(checkCharCount, 20);"></textarea> 
<div><span id="charCounter">300</span> characters left.</div>

</body>

see references and browser compatibility notes at http://www.quirksmode.org/dom/events/cutcopypaste.html and check out their Demo Page which is worth bookmarking, in my subjective opinion

+1. That's a perfectly reasonable approach. Just one thing: it's better to pass a function reference rather than a string to the window.setTimeout call: `onpaste="window.setTimeout(checkCharCount,20);"`. Using a string is equivalent to calling `eval()`, which is dangerous and should be avoided. — Tim Down, Jun 01 '10 at 09:35

score 0 · Answer 3 · answered May 29 '10 at 19:57

I'd take a JQuery Plugin like this one. To do it with PHP is possible, but would be quite.. well.. wrong. Since PHP runs on the server you'd have to send / receive to / from the server with every keydown. Javascript runs client-side, so this extra payload isn't needed. Hover you can specify the max value in PHP, send it to the client in the original response and use it in your client side javascript.

Dynamic Text limit when users writes in a textbox (HTML)

3 Answers3