2013-06-21 2 views
1

У меня есть требование, когда мне нужно применить маскировку ввода к текстовым полям в форме, используемой на мобильном сайте.Текстовое поле ввода маскировки в форме мобильного сайта не работает

Например: у меня есть нижняя форма, используемая на моем мобильном сайте, где номер телефона # должен быть замаскирован в соответствии с примером текста, указанным на этикетке. Я пытаюсь использовать плагин jquery для работы, но я нашел, что он отлично работает в Интернете, но не работает в мобильных браузерах.

enter image description here

Я читал в Интернете в одном из комментария говоря мобильные браузеры не полагаться на нажатие клавиши и KeyDown события. Это правда ?

Я попытался использовать свой собственный код, чтобы достичь решения (код ниже)

function formatPhone(e, node) { 
    var keycode = e.keyCode ? e.keyCode : e.which; 
    if(keycode == 8){ // backspace 
     return false; 
    } 
    if(keycode == 46){ // delete 
     return false; 
    } 
    var input = $(node).val(); 
    input = input.replace(/-/g, ''); 
    var areaCode = input.substring(0, 3); 
    var exchange = input.substring(3, 6); 
    var tail = input.substring(6);   
    $(node).val(areaCode + "-" + exchange + "-" + tail);        

} 
$('#${PRE_ID}Phone').keyup(function (e) { formatPhone(e, this); }); 

Приведенный выше код работает в веб-браузере, но когда речь идет о мобильных первых 3 цифр работает правильно, но 4-й и Обмен 5-й цифрой и последовательность номеров всегда терпят неудачу. А также, когда вы удаляете no, не все номера удаляются.

Есть ли у нас плагин из jquery или любой фрагмент кода, который выполняет эту работу?

Ниже приведены некоторые из плагинов, которые я пробовал в мобильных браузерах по умолчанию (и не удалось) для S2, S3, iPhone

маска | Jquery Plugin Registry http://andr-04.github.io/inputmask-multi/en.html http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmaskedinput/index.htm http://mavrin.github.io/maskInput/

Спасибо заранее

ответ

0

Это работает для меня даже на мобильных устройствах:

$ ("# phoneInput") jqxMaskedInput ({ширина:. 250, высота: 25, mask: '- ### - ### - ####'});

Я использовал его с IPhone и Nexus.

+0

Забота о том, что этот плагин оплачен, и он поставляется в комплекте нескольких функций, которые мне не нужны. Единственной особенностью является входная маска. – Anooj