输入类型 = 'tel' 在 IE 中不起作用

Question

我已经设法解决了这个问题，但我只是一个 javascript 涉猎者，我只是想知道它为什么会发生，以及是否有办法让 IE 识别 input type="tel"。

背景故事：我需要在调查站点托管的调查的一些文本输入旁边添加单位（美元/分钟/年）。在我将类型更改为“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

很遗憾，在IE10 之前，IE 不支持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 fallback 或 webshims。

此外，对于您的特定前缀需求，使用不改变值的workaround 可能更合适。

旁注：您不应该真正将tel 类型用于非电话号码，而input[type=number] 会更正确。