在IE中无法使用input type='tel'功能

Question

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 commented 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' autocomplete="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.

- D W

---

你还应该注意，旧版IE不允许在文档中更改表单控件的类型，你必须替换它。 - RobG

顺便提一下，您可以在此处查看支持所需功能的浏览器链接，以及输入类型链接。 - Eonasdan

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中工作。

- Mike Christensen

---

谢谢你这么快的回复，Mike。我一定会使用你的TelTest而不是浏览器检测。 - D W

Answer 2

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

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

如果不支持数字输入，数字输入将回退到普通文本输入。如果您想要一致的跨浏览器体验，请尝试在不支持某些HTML5的浏览器上使用polyfill fallback或webshims。

此外，针对您特定的前缀需求，可能更适合使用workaround来避免更改值。

顺便说一句：您不应该为非电话号码使用tel类型，而应该使用input[type=number]才更正确。

- Oleg

---

感谢o.v.的评论。我使用“tel”而不是“number”，因为在我看来，键盘对用户更友好（只要需要0-9的数字，而不是小数、逗号等）。 - D W

指出tel的不正确使用并包括更合适的number替代方案，加1分。 - RobG

为什么这里使用“tel”不正确，而“number”更合适？用户数据输入的便利性是我选择合适选项的主要标准，因此我得出结论认为“tel”更合适。了解这会引起哪些问题会很有帮助。 - D W

很好知道，如果数字在标记中，则默认为文本，但正如所解释的那样，这是一个调查网站而不是我的网站，因此更改标记类型为“数字”的唯一方法是使用js。使用js更改为“数字”会导致与“电话”相同的问题。 - D W

@DW：我没有完全明白你无法访问标记的情况，因此建议从HTML开始。 - Oleg