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.

Cruickshank

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. – Heaps

btw you can see what browsers support want features here and the input types here – Geoffreygeoffry

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.

Henhouse

Thanks for such a quick spot on response Mike. I'll certainly use your TelTest instead of browser detect. – Cruickshank

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.

Elinaelinor

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). – Cruickshank

+1 for pointing out the incorrect use of tel and including the more suitable number alternative. – Heaps

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. – Cruickshank

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". – Cruickshank

@DW: I didn't quite get that you had no access to markup hence the suggestion to start with HTML. – Elinaelinor