輸入類型='tel'在IE中不起作用

Question

我設法繞過這個問題，但只是一個javascript dabbler我只是好奇知道它為什么會發生，如果有一種方法讓IE識別輸入類型=“電話”。

背景故事：我需要在調查網站托管的調查的一些文本輸入旁邊添加單位（$ /分鍾/年）。 以下代碼工作正常，直到我將類型更改為“tel”（為了獲得適用於移動設備的數字鍵盤）。 之后它仍然適用於FF，Safari和Chrome，但不適用於IE。 我已經評論過如何在我的情況下修復它。

 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元素是

<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>

任何有關為什么IE在這里窒息的想法都會很有趣並且可能有用。

Answer 1

不幸的是，IE在IE10之前不支持TYPE=TEL 。 在標記中使用此類型是完全有效的：

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

但是，這將被忽略，IE將默認為text類型。 在腳本中設置此類型將導致錯誤，因為IE不會將此視為有效類型。 因此，您必須首先檢測您的瀏覽器是否支持它。 你可以這樣做：

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

如果TelTest()返回true，則表示瀏覽器未恢復為默認text類型，並且它理解tel類型。

工作JSFiddle 。

Answer 2

我將從標記中的適當屬性值開始（而不是使用JS更改它）：

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

如果不支持，則數字輸入將回退到純文本輸入，如果您處於一致的跨瀏覽器體驗，請嘗試對不支持某些HTML5的瀏覽器使用polyfill 后備或webshims 。

此外，對於您的特定前綴需求，使用不會改變值的變通方法可能更合適。

旁注：您不應該將tel類型用於非電話號碼，而是input[type=number]會更正確。