javascript not working on phone

Question

Here is my code:

<input type="text" name="phone" id="phone" maxlength="12" placeholder="Your Phone Number" spellcheck="false">

function on(obj,evt,func) { 
   if (obj.addEventListener) obj.addEventListener(evt,func,false); 
   else obj.attachEvent("on"+evt,func); 
}

on(el("phone"),"keypress",onphonekeypress);

function onphonekeypress(e){
  var phonelen=el("phone").value.trim().length;
  if(phonelen==3 || phonelen==7){
    el("phone").value = el("phone").value.trim() + "-";
  }
 }

function el(id) { return document.getElementById(id); }

The end result is that when someone types a phone number it displays 555-555-5555 instead of 5555555555

It works fine on a computer browser but does not work for mobile browsers.

Not quite sure what to do here.