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.

You should also note that older IE won't let you change the type of a form control in the document, you have to replace it. — RobG, Sep 17 '12 at 03:10
btw you can see what browsers support want features [here](http://caniuse.com/#feat=forms) and the input types [here](http://www.miketaylr.com/code/input-type-attr.html) — Eonasdan, Sep 17 '12 at 15:05

Mike Christensen · Accepted Answer · 2012-09-17T02:49:29.360

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.

Thanks for such a quick spot on response Mike. I'll certainly use your TelTest instead of browser detect. — D W, Sep 17 '12 at 03:03

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

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.

edited May 23 '17 at 12:21

Community

1
1

answered Sep 17 '12 at 02:54

Oleg

24,465
8
61
91

Thanks for comment o.v. I use tel rather than number because the keyboard is much better for users imo (as long as only want numbers 0-9 not decimals, commas &c). – D W Sep 17 '12 at 03:05
1

+1 for pointing out the incorrect use of [tel](http://dev.w3.org/html5/spec-author-view/states-of-the-type-attribute.html#telephone-state-type-tel) and including the more suitable [number](http://dev.w3.org/html5/spec-author-view/states-of-the-type-attribute.html#number-state-type-number) alternative. – RobG Sep 17 '12 at 03:06
Why is tel incorrect here and number more suitable? Ease of user data entry is my main criterion for suitability hence my conclusion tel more suitable. Be good to know where this causes problems. – D W Sep 17 '12 at 03:22
Is good to know that number will default to text if it is in the markup but, as explained, it is a survey website not my own so the only way to change the markup from type="text" is with js. Using js to change to "number" causes same probs as "tel". – D W Sep 17 '12 at 03:34
@DW: I didn't quite get that you had no access to markup hence the suggestion to start with HTML. – Oleg Sep 17 '12 at 03:38

input type = 'tel' not working in IE

2 Answers2