Тип ввода = 'тел' не работает в IE
Мне удалось обойти эту проблему, но, будучи всего лишь фанатом javascript, мне просто любопытно узнать, почему это происходит и есть ли способ заставить IE распознавать входные данные 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 задыхается здесь, были бы интересны и, возможно, полезны.
2 ответа
К сожалению, IE не поддерживает TYPE=TEL
до IE10. Вполне допустимо использовать этот тип в разметке:
<input id="test" type="tel" />
Тем не менее, это будет просто проигнорировано, и IE по умолчанию будет text
тип. Установка этого типа в скрипте приведет к ошибке, так как IE не видит это как допустимый тип. Таким образом, вам придется сначала определить, поддерживает ли ваш браузер это. Вы можете сделать что-то вроде:
function TelTest()
{
var test = document.getElementById('test');
return test.type == 'tel';
}
Если TelTest()
возвращает true, это означает, что браузер не вернулся к значению по умолчанию text
типа и понимает tel
тип.
Работает JSFiddle.
Я бы начал с правильного значения атрибута в разметке (в отличие от изменения его с помощью JS):
<input type="number" id="QR~QID18" ... />
Ввод числа вернется к обычному текстовому вводу, если он не поддерживается, и если вы после согласованного кроссбраузерного опыта, попробуйте использовать запасной вариант с заполнением или webshims для браузеров, которые не поддерживают определенный HTML5.
Кроме того, для ваших конкретных потребностей префикса может быть более целесообразно использовать обходной путь, который не изменяет значение.
Примечание: вы не должны использовать tel
введите вместо не телефонных номеров input[type=number]
было бы правильнее.