Принудительный цифровой ввод для мобильного веб-сайта

Я использую свойство CSS '-wap-input-format ' для принудительного ввода чисел с помощью "*N". 307 это работает на моем SonyEricsson C702, но не работает на Windows Mobile IE, Windows Mobile с Opera или SonyEricsson P1i.

4 3
css mobile-website

4 ответа:

Я предлагаю также добавить немного Javascript. Мобильная Опера, а также iPhone, Minimo (мини-mozilla) и многое другое могут понимать Javascript, по крайней мере до некоторой степени.

function noNumbers(e) {
    var keynum;
    var keychar;
    var numcheck;    
    if(window.event) // IE
    {
        keynum = e.keyCode;
    }
    else if(e.which) // Netscape/Firefox/Opera
    {
        keynum = e.which;
    }

    if((keynum >= 48) && (keynum <= 57)) {
        return(true);
    }

    var good_codes = [8, 14, 15, 37, 38, 39, 40];
    for(i = 0; i < good_codes.length; i++) {
        if(good_codes[i] == keynum) {
            return(true);
        }
    }

    return(false);
}

Надеюсь, это поможет! : )

Metafilter.com

0

Вам не нужен javascript на Opera или iphone и, вероятно,не android. Просто используйте тип ввода "число" из HTML5. Он вернется к текстовому вводу в браузерах, которые его не поддерживают.

2

Формат, о котором вы говорите, является свойством WCSS (WAP CSS) и поэтому не очень широко поддерживается - особенно в современных мобильных устройствах.

Формат -wap-input-format в любом случае работает не очень хорошо. Например, если пользователи заполняют числовой ввод десятичными знаками ("2.50"), это практически невозможно (ближайшее решение: -wap-input-format:"*n " ).

Однако, в то время как свойство не может быть положено для проверки (это все еще должно быть на стороне сервера, в любом случае, как сказал Дарасд), он может помочь пользователям, автоматически переключая вход мобильного устройства на цифровой.

То же самое говорят, что это возможно для iPhone, добавив "zip" или "phone" к имени поля ввода (например. "myfield_zip"). Да, я знаю, это является неуклюжим.

Я бы все равно использовал оба трюка, так как это вызывает хорошую доступность (и Вы можете использовать Javascript в дополнение к ним, если хотите).

0
<input type='tel' />

Вызовет цифровую клавиатуру на Android и iPhone браузерах по умолчанию и Chrome для Android. Он не работает на Windows Phone 7.5, но должен работать на Windows Phone 8, так как браузер WP8 основан на IE9.

Используя

<input type='number' />

Сделает то же самое, но автоматически удалит ведущие нули.

0