Заборона на введення певних символів в input. Як заборонити введення певних символів або провести їх заміну в поле або textarea JS? Замінюємо певні символи в поле вводу засобами JS
Отримав я досить стандартне завдання: фільтрувати вводяться користувачем символи в input, т. Е. Користувач може ввести в рядок набір цифр і букв, наприклад, "5s68d.4r55e.6t5", а на сервер я повинен відправити коректне для збереження суму в рублях - "568,455" (рублів).
Впорався я з завданням досить швидко, повісивши на input подія focusout, але у мого рішення було реалізовано кілька важливих недоліків: де в даному прикладі закінчується сума в рублях і починаються копійки? Якщо користувач введе кілька мінуcов (негативні значення теж коректні в даному випадку), то який з мінусів вважати початком рядка? І так далі.
Тому з'явилася друга версія скрипта з регулярними виразами на подію keyup:
$ (E.curretTarget) .val (($ (e.currentTarget) .val ()). Replace (/ [^ 0123456789 .-] /, ""))
Але як виявилося, цей спосіб мав відчутний брак (я не маю на увазі те, що користувач бачить символ, який вводить і потім цей символ пропадає), а саме - якщо поставити курсор, наприклад, посередині введеного числа в input, ввести букву, то скрипт виріже букву, але перекине курсів в кінець рядка.
З цієї причини старший товариш дав вказівку написати функцію на подію keypress. Через 30 хвилин вже третій варіант функції був готовий і мав він приблизно такий вигляд:
Function () (return this.each (function () ($ (this) .keydown (function (e) (var key \u003d e.charCode || e.keyCode || 0; // allow backspace, tab, delete, enter , arrows, numbers and keypad numbers ONLY // home, end, period, and numpad decimal return (key \u003d\u003d 8 || key \u003d\u003d 9 || key \u003d\u003d 13 || key \u003d\u003d 46 || key \u003d\u003d 110 | | key \u003d\u003d 190 || (key\u003e \u003d 35 && key<= 40) ||
(key >\u003d 48 && key<= 57) ||
(key >\u003d 96 && key<= 105));
});
});
};
Код кінця до кінця взяте steckoverflow, але мій код мало чим відрізнявся від прикладу вище.
Все виглядало красиво - користувач не бачить чисел, що вводяться і курсор не перекидатися в кінець рядка, але, як виявилося, раділи ми рано. Якщо дивитися на keycode клавіш на різних операційних системах (mac, linux, win), то вони мають деякі відмінності, а якщо до цього додати те, що не у всіх маків є 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: "руб." // валюта
Одна з найпоширеніших завдань. Ви або хочете захистити форму від введення лапок і слешів, або хочете зробити миттєву транслітерацію. Так як же ще на клієнтській стороні привести вміст форми в потрібній порядок?
Як заборонити введення певних символів або провести їх заміну в поле або textarea JS?
Логіка проста - створюємо перший масив з символами, які хочемо замінити, а потім другий - з тими, які вставимо замість перших. Разом: два масиви з однаковим (!) Кількістю елементів.
var transChars \u003d new Array ( "" "," "");
{
var from \u003d nameForm;
Var to \u003d "";
var len \u003d from.length;
var character, isRus;
for (var i \u003d 0; i< len; i++)
{
isRus \u003d false;
for (var j \u003d 0; j< rusChars.length; j++)
{
{
isRus \u003d true;
break;
}
}
}
}
Можна заповнити масиви і своїм символами на заміну. Все, що потрібно Вам! Нижче наведені приклади.
Якщо хочемо замінити, наприклад, кирилицю на латинські символи, ну або, простіше кажучи, зробити миттєву транслітерацію) Дивимося нижче:
Var rusChars \u003d new Array ( "А", "а", "Б", "б", "В", "в", "Г", "г", "Д", "д", "Е", "е", "е", "е", "ж", "ж", "з", "з",
"Ш", "ш", "Щ", "щ", "Е", "е", "Ю", "ю", "Я", "я", "И", "и", "Комерсант "," Ь ");
"Sh", "sh", "csh", "csh", "e", "e", "u", "u", "ya", "ya", "i", "i", "" , "");
Якщо хочемо замінити певні символи в поле - лапки одинарні та подвійні на апостроф, який при збереженні в базі даних не дозволить отримати некоректні дані).
Var rusChars \u003d new Array ( "" "," \\ "");
var transChars \u003d new Array ( "" "," "");
Як викликати функцію заміни символів в поле?
Дописуємо в кінці input або textarea наступне. Перше значення ідентифікатор форми, друге - поле з введеними символами, третє - якщо хочемо відобразити в іншому полі символи, то вказуємо ідентифікатор вже другого поля. Можна залишити ідентифікатор все того ж)Onblur \u003d "convert (" ім'я форми "," звідки міняємо "," куди вставляємо замінене ");"
Ну і нижче приклад роботи з файлами і демо-переглядом!
Кілька демо-прикладів заміни символів в полях введення
Замінюємо певні символи в поле вводу засобами JS
ім'я ключа параметра значення ключа параметра, яке може містити: цифри «0-9», один плюс «+» або мінус «-», один символ «e» або «E», одну точку «.». Можна ввести літери, але форма не буде відправлена \u200b\u200bпри натисканні на кнопку submit, а покаже повідомлення про помилку. Частіше за все не задається. Користувач може його змінити, якщо не вказані атрибути readonly і disabled. заблоковано зміна користувачем заблоковані доступ, зміну користувачем і передача даних поточного параметра поле не може бути порожнім
Крок зміни, який може бути позитивним цілим або дробовим числом. Значення value кратно значенням step, тобто ділиться на нього без залишку. Приклад дозволених значень value при step \u003d "20": ..., -40, -20, 0, 20, 40, .... За замовчуванням дорівнює 1. Тобто покаже помилку, якщо ввести десяткову дріб. Для того, щоб прибрати обмеження, потрібно привласнити any. мінімально можливе значення value, необхідне для відправки форми максимально можливе значення value, необхідне для відправки форми підказка-заглушка підказка при наведенні курсору мишки автозаповнення. Можна його відключити або зробити більш конкретизованим. список рекомендованих значень фокус поля (тобто період між клацанням по елементу і клацанням поза елементом) отримано при завантаженні документа
поле не підходить для текстових рядків, що складаються з 16 і більше цифр, наприклад, номера пластикової карти, так як довгі числа від 9007199254740991 можуть округлятися.
Кількість товару
- збільшення і зменшення значення числового поля за допомогою кнопок покрокового зміни,
- повідомлення про помилки при введенні букв і дробових чисел,
- мінімальне значення 1.
Парні позитивні цілі числа
Непарні позитивні цілі числа
Круглі числа
Десяткова дріб з плаваючою комою
Грошовий формат ціни: «рублі, копійки» з двома знаками після коми
Обмежити кількість символів в поле до 5
зменшити довжину
Атрибути minlength, maxlength і size не працюють.
- Необхідна кількість символів в поле визначається атрибутами min, max і step:
- Вказати ширину в CSS (властивість width):
стрілки у
Щоб стрілочки були спочатку, а не тільки при: hover і: focus в Chrome
Прибрати стрілки
Стилізація стрілок «вгору» / «вниз» CSS
Заборонити введення в поле, щоб можна було користуватися тільки кнопками редагування
- + readonly class \u003d "raz"\u003eСуть скриптів, які ми розглянемо далі, в тому, щоб на льоту ловити дії відвідувача і заборонити йому вводити що потрапило в певне поле, крім цифр. Тобто, коли курсор буде сфокусований на поле, при спробі натиснути на клавіатурі на літери, в поле нічого не буде відбуватися, в той же час можна вводити цифри і деякі символи, такі як + - () і тд, то що може знадобиться для поля номер телефону або іншого цифрового.
Для роботи такого скрипта Вам знадобиться в першу чергу саме поле для введення номера. Наприклад у Вас є поле всередині форми яке виглядає приблизно так:
Перший скрипт використовує - jQuery, Тому в шапку вашого сайту перед закривається head або в підвал перед закривається body потрібно додати підключення бібліотеки jQuery. Якщо Ви це робили або це робить система управлінням сайтом (движок сайту), то робити цього не потрібно. Можете подивитися вихідний код сайту і якщо десь є схожа рядок, то значить цей крок потрібно пропустити. Якщо ж підключення немає, то потрібно додати ось такий рядок:
Тепер черга самого скрипта. Його додаємо в окремий файл і підключаємо після бібліотеки або ж беремо в теги:
Ну і власне сам код:
JQuery (document) .ready (function ($) ($ .fn.forceNumbericOnly \u003d function () (return this.each (function () ($ (this) .keydown (function (e) (var key \u003d e.charCode | | e.keyCode || 0; return (key \u003d\u003d 8 || key \u003d\u003d 9 || key \u003d\u003d 46 || (key\u003e \u003d 37 && key<= 40) ||(key >\u003d 48 && key<= 57) ||(key >\u003d 96 && key<= 105) || key == 107 || key == 109 || key == 173|| key == 61); }); }); }; $("#tel").forceNumbericOnly(); });
Скрипт спрацьовує на натискання клавіш. У 8 рядку задаються коди тих клавіш які можна натискати і значення яких з'являться в поле введення. Наприклад, найперший код - 8. Це код клавіші Backspace, тобто тієї що стирає написане. Потрібні коди можна подивитися в таблиці під статтею. У передостанньому рядку вказуємо айди необхідні поля введення. У нашому випадки ID - #tel, в прикладі з полем введення, це прекрасно видно.
Другий код виконаний в чистому javascript і трохи відрізняється. Він дозволяє вводити тільки цифри і backspace, enter, стрілочку назад, вперед. Звичайно ж Ви можете додати нові коди для розширення можливостей. Айді потрібного поля задається в першому рядку. Ну і сам код власне:
Особисто я користуюся першим кодом, мені так зручніше. Який вибрати Вам, вирішувати теж Вам.
На цьому все, спасибі за увагу. 🙂
Таблиця віртуальних кодів клавіш для javascript, яку обіцяв вище.
|
клавіша |
10-ний код |
клавіша |
10-ний код |
| Backspace | 8 | ||
| Tab | 9 | Enter | 13 |
| Shift | 16 | Ctrl | 17 |
| Alt | 18 | Pause | 19 |
| CapsLock | 20 | Esc | 27 |
| пробіл | 32 | PageUp | 33 |
| PageDown | 34 | End | 35 |
| Home | 36 | стрілка вліво | 37 |
| стрілка вгору | 38 | стрілка вправо | 39 |
| стрілка вниз | 40 | Insert | 45 |
| Delete | 46 | 0 | 48 |
| 1 | 49 | 2 | 50 |
| 3 | 51 | 4 | 52 |
| 5 | 53 | 6 | 54 |
| 7 | 55 | 8 | 56 |
| 9 | 57 | A | 65 |
| B | 66 | C | 67 |
| 68 | E | 69 | |
| F | 70 | G | 71 |
| H | 72 | I | 73 |
| J | 74 | K | 75 |
| L | 76 | M | 77 |
| N | 78 | O | 79 |
| P | 80 | Q | 81 |
| R | 82 | S | 83 |
| T | 84 | U | 85 |
| V | 86 | W | 87 |
| X | 88 | Y | 89 |
| Z | 90 | ліва клавіша Windows | 91 |
| права клавіша Windows | 92 | клавіша Applications | 93 |
| NumPad 0 | 96 | NumPad 1 | 97 |
| NumPad 2 | 98 | NumPad 3 | 99 |
| NumPad 4 | 100 | NumPad 5 | 101 |
| NumPad 6 | 102 | NumPad 7 | 103 |
| NumPad 8 | 104 | NumPad 9 | 105 |
| NumPad * | 106 | NumPad + | 107 |
| NumPad - | 109 | NumPad. | 110 |
| NumPad / | 111 | F1 | 112 |
| F2 | 113 | F3 | 114 |
| F4 | 115 | F5 | 116 |
| F6 | 117 | F7 | 118 |
| F8 | 119 | F9 | 120 |
| F10 | 121 | F11 | 122 |
| F12 | 123 | NumLock | 144 |
| ScrollLock | 145 | PrintScreen | 154 |
| Meta | 157 | ; | 186 |
| = | 187 | , | 188 |
| - | 189 | . | 190 |
| / | 191 | ~ | 192 |
| [ | 219 | \ | 220 |
| ] | 221 | " | 222 |
Як заборонити певні символи в input?
Скрипт, наведений нижче, дозволить перевірити правильність набору в поле. Це дозволить обмежити введення певних символів в поле для введення тексту.
Перевірка символів в поле для введення тексту може бути як при самому введенні, так і при певному подію. Скрипт можна використовувати в полях реєстрації, формі входу і т.д. Можна заборонити як певні символи, так і групу символів. Наприклад, можна повністю заборонити введення чисел, заборонити символи пробілу, табуляції, заборонити кирилицю або латиницю.
200? "200px": "" + (this.scrollHeight + 5) + "px"); "\u003e
[ "0-9", ":"] - символи, які будуть заборонені для введення в цьому полі. Додаються в лапках, через кому.
Групи символів
"0-9" або "\\ d" - числові значення
"А-я" - малі літери кирилиці
"А-Я" - великі літери кирилиці
"А-а" - всі букви кирилиці
"A-z" - малі літери латиниці (Перша буква латинська)
"A-Z" - великі літери латиниці (Перша буква латинська)
"A-z" - всі букви латиниці (Перша буква латинська)
"A-я" - всі букви (Перша буква латинська)
"\\ W" - всі букви, цифри і символ "_"
"\\ S" - символи пробілу, табуляції і абзацу
| Увага! Копіювання даного матеріалу заборонено без вказівки посилання на сайт сайт | |
| Джерело / Борат | |
