Входная фильтрация входной клавиатуры Javascript

Question

Есть ли у кого-нибудь рабочий динамический входной фильтр javascript, который ограничивает ввод текста через несколько браузеров?

Я видел несколько примеров в Интернете, но большинство из них, похоже, имеют недостатки или отсутствие поддержки мультиблок.

Моя текущая попытка опубликована ниже, но она не работает для сдвинутых номеров под firefox, и я еще не пробовал другие браузеры.

Как показывает http://www.quirksmode.org/js/keys.html, это непростая задача.

У кого-нибудь есть лучшее решение?

var numb = /[0-9]/; 
var lwr = /[a-z]/; 
var upr = /[A-Z]/; 
var alpha = /a-zA-Z]/; //not checked 
var alphaNum = /a-zA-Z0-9/; //not checked 

function onKeyPressAcceptValues(e, reg){ 
    var key = window.event ? e.keyCode : e.which; 
    //permit backspace, tab, delete, arrow buttons, (key == 0 for arrow keys) 

    alert(key); 
    if(key == 8 || key == 9 || key == 46 ||(key>32 && key <41 ||key == 0)){ 
     return true; 
    } 
    var keychar = String.fromCharCode(key); 
    return reg.test(keychar); 
} 

function isNumberKey(parm) {return onKeyPressAcceptValues(parm,numb);} 
function isLowerKey(parm) {return onKeyPressAcceptValues(parm,lwr);} 
function isUpperKey(parm) {return onKeyPressAcceptValues(parm,upr);} 
function isAlphaKey(parm) {return onKeyPressAcceptValues(parm,alpha);} 
function isAlphanumKey(parm) {return onKeyPressAcceptValues(parm,alphaNum);} 

Он будет использоваться через

<input type="text" name="pw[first_name]" size="15" maxlength="15" onkeypress="return isAlphaKey(event)">

Answer 1

отлова событий клавиатуры не будет делать трюк в любом случае, так как пользователь всегда может использовать Редактировать | Вставить. Даже если вы придумаете кросс-браузерное решение для его обработки, пользователь всегда может обойти все, отключив Javascript.

Другими словами, не тратьте впустую свое время. Просто дайте пользователю ошибку при попытке отправить неверные данные.

Answer 2

Вот один из способов сделать это:

• Создание «псевдо поле» - это где вход будет отображаться пользователю
• При нажатии установить фокус на скрытое поле
• Есть тип пользователя в скрытом поле
• Посмотрите на то, что набираясь и скопировать действительные символы псевдо-поле

пользователь думает, что они печатают в поле, но это не так.

Answer 3

Будет ли проверять и удалять недопустимые значения после ввода?

Проверка charCode и keyCode может быть довольно сложной в браузере, почему бы не проверить значение, которое фактически добавлено в текстовое поле?

Инвертировать ваши регулярные выражения, и они соответствуют всем, что вы не хотите. Как только у вас есть это, просто используйте инвертированное регулярное выражение для замены данных, вставленных в поля ввода, которые вам не нужны.

Быстрый пример, который я создал в http://jsbin.com/ulibu, имеет текстовое поле, которое ТОЛЬКО принимает целые числа. Он имеет небольшой яваскрипт блок, который лишает нецифровой из поля:

function checktext(e) { 
    //Remove digits 
    //Yes, the global search/replace is important. If we don't use a global 
    //replace ctrl+v will remove only the first invalid character instead of 
    //them. 
    e.value = e.value.replace(/[^\d]/g , ''); 
} 

, а поле ввода объявляется с событием KeyUp, чтобы поймать что-нибудь напечатало:

<input type="text" id="text" onkeyup="checktext(this);"/> 

Конечно это не идеально.Вещи, которые вам по-прежнему нужно делать:

1. Подтвердить серверную сторону. Проверка на стороне клиента никогда не поймает всех ваших пользователей. Всегда проверяйте серверную сторону.
2. Совершенствуйте проверки. Это простое регулярное выражение, некоторые из них могут оказаться более сложными
3. События вставки патчей, поэтому события вставки мыши преобразуются таким же образом.
4. Показать предупреждение пользователю, что разрешено использовать только X, если вам нужно удалить текст. В противном случае они могут просто подумать, что «браузер действует смешно».