Фільтр символів, що вводяться в input

я Отримав досить стандартне завдання: фільтрувати вводяться юзером символи в input, тобто користувач може ввести в рядок набір цифр і букв, наприклад, '5s68d.4r55e.6t5', а на сервер я повинен відправити коректне для збереження суму в рублях — '568,455' (рублів).

Впорався я з завданням досить швидко, повісивши на input подія focusout, але у мого рішення був ряд важливих недоліків: де у даному прикладі закінчується сума в рублях і починаються копійки? Якщо користувач введе кілька мінусів (негативні значення теж коректні в даному випадку), то який з мінусів вважати початком рядка? І так далі.

Тому з'явилася друга версія скрипта з регулярними виразами на подію keyup:

$(e.curretTarget).val(($(e.currentTarget).val()).replace( /[^0123456789.-]/, "))

Але як виявилось, цей спосіб мав відчутний недолік (я не маю на увазі те, що користувач бачить символ, який вводить і потім цей символ пропадає), а саме — якщо поставити курсор, наприклад, посередині введеного числа у input, ввести літеру, то скрипт виріже букву, але перекине курсів в кінець рядка.

З цієї причини старший товариш дав вказівку написати функцію на події keypress. Через 30 хвилин вже третій варіант функції був готовий і він мав приблизно такий вигляд:


function()
{
return this.each(function()
{
$(this).натискання(function(e)
{
var key = e.charCode || e.keyCode || 0;
// allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
// home, end, period, and numpad decimal
return (
key == 8 || 
key == 9 ||
key == 13 ||
key == 46 ||
key == 110 ||
key == 190 ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
});
});
};

Код взято з steckoverflow, але мій код мало чим відрізнявся від прикладу вище.

Все виглядало красиво — користувач не бачить введених чисел і курсор не перекидає в кінець рядка, але, як виявилося, раділи ми рано. Якщо дивитися на keycode клавіш на різних операційних системах (mac, linux, windows), то вони мають деякі відмінності, а якщо до цього додати те, що не у всіх маків є numPud і, отже, числа вводяться з затиснутим шифтом і також цифри можуть вводиться з віртуальної клавіатури. У підсумку виходить код у багато разів більше, ніж останній приклад.

У підсумку я написав скрипт на подію keyup і він запрацював з єдиним недоліком — користувач на секунду бачить вводиться число. Зі зрозумілих причин я не можу викласти скрипт, але ця ситуація спонукала мене написати новий сценарій, який я виклав на github. Я зробив скрипт більш універсальним — зараз він більше розрахований на передачу значення в DOM-елементи, ніж на модифікацію введеного значення input (це буде наступний крок).

На момент написання статті в функцію можна передати кілька параметрів:

  • forDisplay: true, // для відображення в дивах
  • classOfDomElement: ",// класи DOM елементів через кому, без пробілів
  • idOfDomElement: ",// id DOM елементів через кому, без пробілів
  • //forInput: false
  • forSave: false, // function forSave — повертає тільки цифри з крапкою
  • negative: false
  • afterPoint: 2, // кількість цифр після крапки
  • showPoint: true, // показувати точку до введення копійок
  • currency: 'руб.' // валюта
Спасибі за увагу!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.