Input type = 'tel' does not work in IE

Question

I managed to get around this problem, but being just a javascript dabbler, I'm just curious to find out why this happens, and if there is a way to get IE to recognize the input type = "tel".

Background: I needed to add units ($ / minutes / years) next to some text entries in the survey conducted on the survey site. The following code works fine until I change the type to "tel" (to get the appropriate numeric keypad for mobile devices). After that, it still works in FF, Safari, and Chrome, but not in IE. I commented on how I fixed this 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"; }} }); 

Html element

 <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 is suffocating here would be interesting and possibly useful.

Answer 1

Unfortunately, IE does not support TYPE=TEL before IE10 . This is absolutely true for using this type in markup:

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

However, this will simply be ignored, and IE will use the text type by default. Setting this type to a script will result in an error, since IE does not consider this a valid type. Thus, you will need to determine if your browser supports it in the first place. 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 has not returned to the text type by default, and it understands the tel type.

JSFiddle work.

Answer 2

I would start with the correct attribute value in the markup (as opposed to changing it with JS):

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

Entering a number will return to plain text input if it is not supported, and if you after a consistent cross-browser experience try using polyfill backback or webshims for browsers that do not support certain HTML5.

Also, for your specific prefix needs, it might be more appropriate to use a workaround that does not change the meaning.

Side note: you should not use the tel type for non-telephone numbers, instead, input[type=number] will be more correct.