I need to set the maximum character input for users simililar to how stackoverflow.com works. I plan on using javascript to provide feedback to开发者_如何学编程 the user and count the characters. Only submissions that don't exceed the maximum character count are allowed. I don't plan on using the xhtml input properties to limit this amount as I'll allow overage on characters as long as they are not submitted. On the backend I'll just set the varchar field in mysql to charmax.

Question is, how do I count character inputs, do I base it off of onkeydown() or onkeyup(). I'm not too sure why there are two functions, because a key that goes down must come up, so which one should I use to do the counting?

---

HTML:

<input type='text' id='text'/>

JS:

function textLength(value){
   var maxLength = 144;
   if(value.length > maxLength) return false;
   return true;
}

document.getElementById('text').onkeyup = function(){
     if(!textLength(this.value)) alert('text is too long!');
}

Here is a fiddle demo: http://jsfiddle.net/maniator/L2LRK/

---

Use document.getElementById('YourInputBoxId').value.length to get the length of the text.

Don't use the keyboard events to keep track of the number of characters. Ctrl+V is a single keypress (or two maybe), but it can cause your text to grow megabytes. :) You could use these events to update a label with the current number of characters.

Apart from onkeyup, you can also use the oninput event, which is triggered when you type into an input box.

And remember, always check on the server as well. Javascript may fail or can be deliberately disabled. Your server should always perform necessary checks. Although I believe that MySQL will automatically truncate texts that are too large...

A good alternative would be to set the maxlength property of the inputs. This way, the maximum length is enforced even without javascript. Then, you can remove that flag and add the necessary events from javascript. This way, you will have a usable solution for javascript browsers, while having a more strict check for non-javascript browsers, which I think is better than no check at all.

---

I found the bug in your suggestion. Here my test patterns:

If limit max characters are 05 characters. Test value: 123456, ABCDEF

1: Use keyboard, type the text normally

for 123456, 6 will be deleted

for ABCDEF, F will be deleted

Result: OK

2: Use keyboard, copy and paste 123456 and ABCDEF from other place

for 123456, paste (Ctrl V): "123456123456" => 456123456 will be deleted

for ABCDEF, paste (Ctrl V): "ABCDEFABCDEF" => DEFABCDEF will be deleted

Result: OK

3: Use mouse, copy and paste 123456 and ABCDEF from other place

for 123456, paste (Right click + paste): "123456123456" => NO characters will be deleted

for ABCDEF, paste (Right click + paste): "ABCDEFABCDEF" => NO characters will be deleted

Result: FALSE;

4: Use mouse, copy and paste 123456 and ABCDEF from other place after that type something else

for 123456, paste (Right click + paste): "123456123456" => NO characters will be deleted, type "123" using keyboard => All text will be deleted.

for ABCDEF, paste (Right click + paste): "ABCDEFABCDEF" => NO characters will be deleted, type "ABC" using keyboard => All text will be deleted.

Result: FALSE;

I give you my false from my project at same function. In my function this pattern are false for ALL. Here my : jsfiddle This function that I have found in the internet, sorry I forget the source so If you are the owner, please for give me to public here.

HTML:

//Count content
  maxL = 2000;
  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);
  } //End Count content

You have <b><label id="myCounter">2000</label></b> characters left
<br/>
<textarea class="inputtextfield" onKeyPress="return taLimit(this)" onKeyUp="return taCount(this,'myCounter')" id="content" name="content" rows=7 wrap="physical" cols=40></textarea>

I am very confused how to fix my bug.

---

There are two functions because there are two different events. If you wanted to know when someone pressed Ctrl + Enter for instance you need to know exactly when each key is hold down and when it is released.

In your case (display a warning when reached the limit) i would use keydown because that is what happens first, that way you know right at the moment when the user went over X characters. If you used keyup te user could press a key for several seconds without seeing any message.

To count the characters you can do:

document.getElementById("myInput").value.length