тип ввода = 'tel' не работает в IE

мне удалось обойти эту проблему, но, будучи только дилетантом 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 задыхается здесь, были бы интересны и, возможно, полезны.

7
javascript tel

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.

8

Я бы начал с правильного значения атрибута в разметке (в отличие от изменения его с помощью JS):

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

числовой ввод будет откат к текстовому вводу, если он не поддерживается, и если вы после последовательного кросс-браузера, попробуйте использовать polyfill fallback или webshims для браузеров, которые не поддерживают определенные HTML5.

кроме того, для ваших конкретных потребностей в префиксах может быть более целесообразно использовать решение это не изменяет значение.

боковое Примечание: Вы не должны использовать tel введите не телефонные номера, вместо input[type=number] было бы правильнее.

1