js backspace and counting how many digits

Question

i have this code for counting how many digits where entered

var tnnod=0;
function telephone(e) {
    if (tnnod<10) {
        var key;
        var keychar;

        if (window.event) {
            key = window.event.keyCode;
        }
        else if (e) {
            key = e.which;
        }
        else {
            return true;
        }
        keychar = String.fromCharCode(key);

if ((key==null) || (key==0) || (key==8) ||  (key==9) || (key==13) || (key==27) ) {
   return true;
}
else if ((("0123456789").indexOf(keychar) > -1)) {
    tnnod+=1;
   return true;
}
else if (keychar == "-") { 
  return true;
}
else
   return false;
}
    else
        return false
}

but how do i remove 1 from the counter each time the backspace was hitted and the char that was deleted was a digit and not "-"

i have tried getting the key == 8 to do something but hitting the backspace doesn't really return anything for some reason

what can be the problem?

Answer 1

I think it's a bad idea to count keystrokes for something like that. We're talking about input into a text field, right? What will you do if the user does a paste of some string from the clipboard? What if he uses the mouse to mark some text and delete it? Replace it with one character?

I think it would make a lot more sense to just look at the text from the text field and (if necessary) do some fiddling to ensure proper syntax. Let the user enter whatever he wants, if you find garbage characters you can just replace the text with one that doesn't have those characters. You can also trim the field at this time (no leading or trailing spaces). Also, keeping accurate track of the length becomes as easy as asking for the length of the string returned from the field.

Answer 2

A few thoughts -

1. Would it be possible to use 3 fields instead of 1? Then you could add the dashes later.
2. If you want to use your current method, you might keep a counter of the dashes that have been typed. Then, on each key stroke, check to see how many dashes are left. If it's different than the previous count, you know they've deleted the dashes.
3. I think it needs to be a bit more robust. What if they put a dash in an odd place within the string?
4. You could also prevent the user from entering all non-numeric characters and insert the dashes at each point of separation. So, insert a dash after 3 and 6 numbers as they are typing.

Answer 3

You don't have to detect specifically the backspace keypress. Try this:

var tn_count = 0;
function telephone(ev) {
  var el = document.getElementById("telephone_number");

  if(tn_count < 10) {
    var key, keychar;
    if(window.event) {
      key = window.event.keyCode;
    } else {
      key = ev.which;
    }

    keychar = String.fromCharCode(key);
  }

  if(!keychar.match(/\d|-/)) {  // only allow digits or "-"
    return false;
  }

  // clean up any non-digit chars that get in here somehow
  el.value = el.value.replace(/[A-Za-z]+/, '');
  tn_count = el.value.replace("-",'').length; // get the digit length
  return true;
}

The basic difference here is that instead of adding 1 every time the key is pressed, just updated tn_count to be the total count of all digit characters in the field. You can probably do some more cleanup just to be safe, but this should get you started.

Answer 4

Could you just count the length of the string and use that value? Something like the following:

function getLen(el) {
    return el.value.replace('-', '').length;
}

alert(getLen(document.getElementById('telephone_number')));