input type = 'tel' not working in IE

Question

I've managed to walk around this problem, but being only a javascript dabbler I am just curious to know why it happens and if there is a way to get IE to recognise input type="tel".

Backstory: I needed to add units ($/minutes/years) next to some text inputs on a survey hosted by a survey site. The following code works great until I change type to "tel" (in order to get appropriate numeric keyboard for mobile devices). After that it still works in FF, Safari & Chrome, but not in IE. I've commented out how I fixed it in my case.

 SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
  var questionId = this.questionId;
  var inputs = $(questionId).getElementsByTagName('input');
  var telId = "QR~"+questionId;

//get numeric keypad for mobile devices
// this is where I put "if (isIE()==false){" to get around the problem

document.getElementById(telId).type = 'tel'; //IE tells me this argument is invalid

//append "minutes"
for(var x = 0; x<inputs.length;x++){
var input = inputs[x];
if(input.id != undefined && input.type =='tel') //obviously in my fix added "|| type=='text'" to pick up the IEs
{
  var id = input.id;
  $(id).up().innerHTML = $(id).up().innerHTML + "minutes";
}}
});

The html element is

<div class='QuestionBody'>
    <div class='ChoiceStructure'>
                <input type='TEXT' autocomplete="off" id='QR~QID18' value='' class='InputText' name='QR~QID18~TEXT' style="width: 80px;" >
    </div>
</div>

Any thoughts on why IE chokes here would be interesting and perhaps useful.

Answer 1

Unfortunately, IE does not support TYPE=TEL before IE10. It's perfectly valid to use this type in markup:

<input id="test" type="tel" />

However, this will just be ignored and IE will default to the text type. Setting this type in script will result in an error, since IE does not see this as a valid type. Thus, you'll have to detect if your browser supports it first. You can do something like:

function TelTest()
{
   var test = document.getElementById('test');
   return test.type == 'tel';
}

If TelTest() returns true, it means that the browser did not revert back to the default text type and it understands the tel type.

Working JSFiddle.

Answer 2

I'd start with proper attribute value in the markup (as opposed to altering it with JS):

<input type="number" id="QR~QID18" ... />

A number input will fallback to a plain text input if it's not supported, and if you're after consistent cross-browser experience, try using a polyfill fallback or webshims for browsers that do not support certain HTML5.

Also, for your particular prefixing needs, it may be more appropriate to use a workaround that does not alter the value.

Side note: you shouldn't really be using tel type for non-telephone numbers, instead input[type=number] would be more correct.