Question

我设法绕过这个问题，但只是一个javascript dabbler我只是好奇知道它为什么会发生，如果有办法让IE识别输入类型=“tel”。

背景故事：我需要在调查网站托管的调查的一些文本输入旁边添加单位（$ /分钟/年）。以下代码工作正常，直到我将类型更改为“tel”（为了获得适用于移动设备的数字键盘）。之后它仍然适用于FF，Safari和amp; 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" ... />

如果不支持，则数字输入将回退到纯文本输入，如果您处于一致的跨浏览器体验，请尝试对不支持的浏览器使用polyfill fallback或webshims某些HTML5。

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

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

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

2 个答案: