Часто стоит задача, ограничить возможность ввода букв в поле input. Во многих источниках предлагают это сделать следующим способом, навесить обработчик события keyup, со следующим кодом:
Этот метод обладает рядом недостатков, к примеру также пользователь не сможет вводить цифры numpad, в опере не будут работать клавиши tab,up,left и т. д.
Как же сделать правильно?
Но также встречаются хорошие идеи, доработав которые можно добиться желаемого результата.
Я решил на основании этого кода написать jQuery плагин. Но чтобы не изобретать велосипед я решил поискать уже готовый плагины, и нашел один digitalbush.com/projects/masked-input-plugin. Дествительно замечательный плагин, но мне нужно было, что бы я мог задавать условия для поля либо целые числа, либо дробные числа.
И так, какие задачи я поставил себе:
Как упоминалось ранее, при нажатии клавиши я преобразовал код в символ, проверял его через регулярное выражение. Осталось предусмотреть только случай, если пользователь вставил значение через контекстное меню, для этого я повесил обработчик на события blur, где выполнял проверку через нужное нам регулярное выражение.
Однако когда я стал все проверять, я заметил, если пользователь выделял мышкой какую-то часть текста в Input. Он мог вставить не разрешенный символ, обойти это регулярное выражение, для того чтобы это избежать я брал выделенный текст(вот здесь пришлось бороться с кроссбраузерностью ) и в соответствии с условиями проверял.
Исходники на github и демо
Используемая литература:
return ((event.keyCode>47)&&(event.keyCode<58))
Этот метод обладает рядом недостатков, к примеру также пользователь не сможет вводить цифры numpad, в опере не будут работать клавиши tab,up,left и т. д.
Как же сделать правильно?
Но также встречаются хорошие идеи, доработав которые можно добиться желаемого результата.
function testKey(e)
{
// Make sure to use event.charCode if available
var key = (typeof e.charCode == 'undefined' ? e.keyCode : e.charCode);
// Ignore special keys
if (e.ctrlKey || e.altKey || key < 32)
return true;
key = String.fromCharCode(key);
return /\d/.test(key);
}
Я решил на основании этого кода написать jQuery плагин. Но чтобы не изобретать велосипед я решил поискать уже готовый плагины, и нашел один digitalbush.com/projects/masked-input-plugin. Дествительно замечательный плагин, но мне нужно было, что бы я мог задавать условия для поля либо целые числа, либо дробные числа.
И так, какие задачи я поставил себе:
- Задавать тип «float», «int», либо регулярное выражение.
- Задавать разделитель для типа «float».
- Задвать количество символов до разделителя и после него.
- Значение по умолчанию, если пользователь вставил значение через контекстное меню.
Как упоминалось ранее, при нажатии клавиши я преобразовал код в символ, проверял его через регулярное выражение. Осталось предусмотреть только случай, если пользователь вставил значение через контекстное меню, для этого я повесил обработчик на события blur, где выполнял проверку через нужное нам регулярное выражение.
Однако когда я стал все проверять, я заметил, если пользователь выделял мышкой какую-то часть текста в Input. Он мог вставить не разрешенный символ, обойти это регулярное выражение, для того чтобы это избежать я брал выделенный текст(вот здесь пришлось бороться с кроссбраузерностью ) и в соответствии с условиями проверял.
Исходники на github и демо
Используемая литература:
- habrahabr.ru/blogs/javascript/55922.
- xpoint.ru/know-how/JavaScript/PoleznyieFunktsii?38#Fil'trVvodaDlyaTekstovogoPolya