javascript character counter in firefox

Question

First off, let me say I know nothing about javascript. I have been searching the web the last couple days to find a character counter to add to a textarea. I finally found a nifty little script (working example) that works great except for one problem. When you reach the maximum number of characters allowed in Firefox, the entire keyboard is disabled. You can't backspace to shorten the count or click in the middle and delete. Works fine in IE, Chrome and Safari but not in FireFox. My request is, can someone help me alter the javascript so the backspace and delete buttons are enabled in FireFox when the maximum number of characters is reached.

Thanks for all the help.

JavaScript Code

<script language = "Javascript">

maxL=255;
var bName = navigator.appName;
function taLimit(taObj) {
    if (taObj.value.length==maxL) return false;
    return true;
}

function taCount(taObj,Cnt) { 
    objCnt=createObject(Cnt);
    objVal=taObj.value;
    if (objVal.length>maxL) objVal=objVal.substring(0,maxL);
    if (objCnt) {
        if(bName == "Netscape"){    
            objCnt.textContent=maxL-objVal.length;}
        else{objCnt.innerText=maxL-objVal.length;}
    }
    return true;
}

function createObject(objId) {
    if (document.getElementById) return document.getElementById(objId);
    else if (document.layers) return eval("document." + objId);
    else if (document.all) return eval("document.all." + objId);
    else return eval("document." + objId);
}
</script>

HTML Code

<font> Maximum Number of characters for this text box is 255.<br>
<textarea onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,'myCounter')" name="Description" rows=7 wrap="physical" cols=40>
</textarea>
<br><br>
You have <B><SPAN id=myCounter>255</SPAN></B> characters remaining for your description...</font>

I would recommend saving the contents after the limit is reached, and if the next input increases the size (invalidating the text) then replace it with the saved version. — RyanS, Jul 12 '13 at 19:09
Good question, but I'd recommend picking another script. What you've got here deserves to be remembered as a thing from the early 2000s. — Trevor Dixon, Jul 12 '13 at 19:10
This script uses `eval()`. Then, this script is shit. Therefore, you should use a better one, like Trevor Dixon said — Oriol, Jul 12 '13 at 19:13
possible duplicate of [Countdown available spaces in a textarea with jquery or other?](http://stackoverflow.com/questions/1250748/countdown-available-spaces-in-a-textarea-with-jquery-or-other) — Trevor Dixon, Jul 12 '13 at 19:14
Which browsers are you supporting? Why cant you just use the maxlength attribute instead of javascript? then you just need a function that will say `var charsLeft = $(this).attr("maxlength")-$(this).val().length;` and put thatin your `myCounter` span? It is new to HTML 5 but is still supported in most new browsers (not Opera) — Legion, Jul 12 '13 at 19:15
@RyanS: How would I do this? Ideally I'd like to just add some code when the maximum is reached to detect the browser type and if the browser is FF, enable the delete and backspace keys. — user2577468, Jul 15 '13 at 12:39
@Legion: I know the code is old, but it's all I have been able to find that worked inside DNN with FF. I'm supporting FF, IE and Chrome. — user2577468, Jul 15 '13 at 12:41

Legion · Answer 1 · 2013-07-12T19:34:28.423

0

Which browsers are you supporting? Why cant you just use the maxlength attribute instead of javascript? then you just need a function that will say var charsLeft = $(this).attr("maxlength")-$(this).val().length; and put thatin your myCounter span? It is new to HTML 5 but is still supported in most new browsers (not Opera)

<font> Maximum Number of characters for this text box is 255.<br>
<textarea onKeyUp="countCharsLeft(this)" onKeyPress="countCharsLeft(this)" name="Description" rows=7 wrap="physical" cols=40 maxlength="255">
</textarea>
<br><br>
You have <B><SPAN id="myCounter">255</SPAN></B> characters remaining for your description...    </font>

Javascript

function countCharsLeft(element){
  var curCharCount = element.value.length;
  var maxLength = element.getAttribute("maxlength");
  document.getElementById("myCounter").innerHTML = maxLength-curCharCount;
}

JSFiddle Demo

edited Jul 12 '13 at 19:34

answered Jul 12 '13 at 19:28

Legion

796
7
12

Calling `document.getElementById` each time user writes a character it's expensive. You should consider caching it in a variable. – Oriol Jul 12 '13 at 19:38
Tried this also and got the same results. The counter doesn't work in FireFox for some reason. This is going in an .ascx control that is getting embedded in DotNetNuke as a module. I don't know if that has something to do with it or not. – user2577468 Jul 12 '13 at 19:54
What version of FireFox are you using? I just tested the fiddle demo in FireFox and it works just fine... (I tested it in versions 21 and 22) – Legion Jul 12 '13 at 20:00
Does DotNetNuke minify the js? Im not sure but that might be a problem because the javascript function will be named something else most likely a single character – Legion Jul 12 '13 at 20:13
I'm using 22. That is a possibility. Let me test the script outside of DNN and see what happens. – user2577468 Jul 15 '13 at 13:19
Does the same thing. Works fine until you run out of characters then the entire keyboard is locked. Can't backspace, delete, tab to a new field....nothing. – user2577468 Jul 15 '13 at 13:27
@Legion Thanks for the help and the comments, they were greatly appreciated. – user2577468 Jul 15 '13 at 13:37

score 0 · Answer 2 · answered Jul 12 '13 at 19:29

0

You could try this:

HTML:

<p>Maximum Number of characters for this text box is 255.</p>
<textarea data-counter="myCounter" id="Description" rows="7" wrap="physical" cols="40" maxlength="255">
</textarea>
<p>You have <b><span id="myCounter">255</span></b> characters remaining for your description...</p>

JS:

var txtArea = document.getElementById('Description');
txtArea.counter = document.getElementById(txtArea.getAttribute('data-counter'));
txtArea.onkeyup = txtArea.onchange = txtArea.oninput = taLimit;

function taLimit() {
    var maxL = this.getAttribute('maxlength');
    if (this.value.length>=maxL){
        this.value = this.value.substring(0, maxL);
    }
    this.counter.innerHTML = maxL-this.value.length;
}

DEMO: http://jsfiddle.net/3MueW/2/

answered Jul 12 '13 at 19:29

Oriol

274,082
63
437
513

I tired this and the counter doesn't work in FireFox for some reason. This is going in an .ascx control that is getting embedded in DotNetNuke as a module. I don't know if that has something to do with it or not. The only example I was able to get to work in FireFox was the one I posted above and it only works half way. – user2577468 Jul 12 '13 at 19:53
@user2577468 For me it works on Firefox 25, and I don't know what DotNetNuke and .ascx are. Can you try it with the console and post the error? – Oriol Jul 12 '13 at 19:57
I'm on FireFox 22. It doesn't give an error, the code is executing correctly, it's just locking the entire keyboard when the maximum is reached. – user2577468 Jul 15 '13 at 12:24
@user2577468 For me it works on FF22. Maybe those DotNetNuke and .ascx are adding the code which produces the lock. My code is safe because it doesn't stop writing events, it only replaces all text with the first 255 characters (or less, if the textarea is not completely filled), so it doesn't kill backspace functionality. – Oriol Jul 15 '13 at 12:48
Let me test the script outside of DNN and see what happens. I'll get back with you. – user2577468 Jul 15 '13 at 13:19
Does the same thing. Works fine until you run out of characters then the entire keyboard is locked. Can't backspace, delete, tab to a new field....nothing. – user2577468 Jul 15 '13 at 13:28

score 0 · Accepted Answer · answered Jul 12 '13 at 20:06

Though this script/html looks rather old and you should really find something little more modern, the simplest way to fix this is by modifying the taLimit() function to consider whether key being pressed is printable or not:

function isCharacterKey(event) {
    var charCode = event.charCode;    
    return charCode !== 0;
}

function taLimit(taObj, event) {        
    if (taObj.value.length<maxL || !isCharacterKey(event)) return true;
    return false;    
}

Note, will need to modify call to taLimit() to include event object:

<textarea onKeyPress="return taLimit(this, event)" onKeyUp="javascript:return taCount(this,'myCounter')" name="Description" rows=7 wrap="physical" cols="40">
</textarea>

This fixed it. Thanks for the help and I'll try to find some more modern examples the next time. — user2577468, Jul 15 '13 at 13:35

javascript character counter in firefox

3 Answers3