javascript - input type = 'tel' not working in IE - Stack Overflow

admin管理员组

文章数量:1278852

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 mented 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' autoplete="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.

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 mented 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' autoplete="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.

• javascript
• tel

Share Improve this question Follow asked Sep 17, 2012 at 2:24 D WD W 8311 silver badge44 bronze badges 2

• 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 Commented Sep 17, 2012 at 3:10
• btw you can see what browsers support want features here and the input types here – Eonasdan Commented Sep 17, 2012 at 15:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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.

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.

本文标签： javascriptinput type39tel39 not working in IEStack Overflow