Текстовое поле маскирования ввода в форме мобильного веб-сайта не работает

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

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

введите здесь описание изображения

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

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

    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-я цифры меняются местами, а последовательность чисел всегда терпит неудачу. А еще при удалении нет удаляются не все номера.

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

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

маска | Реестр подключаемых модулей jQuery 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/

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


person Anooj    schedule 21.06.2013    source источник


Ответы (1)


Это работает для меня даже на мобильном телефоне:

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

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

person scripto    schedule 21.06.2013
comment
Проблема в том, что этот плагин платный и включает в себя несколько функций, которые мне не нужны. Единственная функция, которая мне нужна, это маска ввода. - person Anooj; 24.06.2013