8

我已经设法解决了这个问题，但作为一个 JavaScript 涉猎者，我只是想知道它为什么会发生，以及是否有办法让 IE 识别输入类型 =“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 在这里阻塞的任何想法都会很有趣并且可能有用。

4

2 回答 2

9

不幸的是，IE 不支持IE10TYPE=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。

于 2012-09-17T02:42:42.257 回答
1

我将从标记中的正确属性值开始（而不是使用 JS 更改它）：

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

如果不支持数字输入，它将回退为纯文本输入，如果您追求一致的跨浏览器体验，请尝试为不支持某些 HTML5 的浏览器使用 polyfill回退或webshims 。

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

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

于 2012-09-17T02:54:33.800 回答