Как стать автором
Обновить

Плагин для маски ввода чисел в input

Время на прочтение2 мин
Количество просмотров54K
Часто стоит задача, ограничить возможность ввода букв в поле input. Во многих источниках предлагают это сделать следующим способом, навесить обработчик события keyup, со следующим кодом:
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. Дествительно замечательный плагин, но мне нужно было, что бы я мог задавать условия для поля либо целые числа, либо дробные числа.
И так, какие задачи я поставил себе:
  1. Задавать тип «float», «int», либо регулярное выражение.
  2. Задавать разделитель для типа «float».
  3. Задвать количество символов до разделителя и после него.
  4. Значение по умолчанию, если пользователь вставил значение через контекстное меню.

Как упоминалось ранее, при нажатии клавиши я преобразовал код в символ, проверял его через регулярное выражение. Осталось предусмотреть только случай, если пользователь вставил значение через контекстное меню, для этого я повесил обработчик на события blur, где выполнял проверку через нужное нам регулярное выражение.
Однако когда я стал все проверять, я заметил, если пользователь выделял мышкой какую-то часть текста в Input. Он мог вставить не разрешенный символ, обойти это регулярное выражение, для того чтобы это избежать я брал выделенный текст(вот здесь пришлось бороться с кроссбраузерностью ) и в соответствии с условиями проверял.
Исходники на github и демо
Используемая литература:
  1. habrahabr.ru/blogs/javascript/55922.
  2. xpoint.ru/know-how/JavaScript/PoleznyieFunktsii?38#Fil'trVvodaDlyaTekstovogoPolya
Теги:
Хабы:
+13
Комментарии22

Публикации

Истории

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн