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

StackOverflow https://stackoverflow.com/questions/705481

  •  22-08-2019
  •  | 
  •  

Вопрос

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

Это было полезно?

Решение

Мое предложение также состоит в том, чтобы добавить немного Javascript.Мобильная Opera, а также 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

Другие советы

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

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

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

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

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

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

<input type='tel' />

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

Используя

<input type='number' />

сделает это тоже, но автоматически удалит начальные нули.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top