Kuidas teatud tähemärke sisendis keelata?

Allolev skript võimaldab teil kontrollida, kas väli on õigesti sisestatud. See piirab teatud märkide sisestamist tekstisisestusväljale.

Märkide kontrollimist tekstisisestusväljal saab teha nii sisestuse enda kui ka teatud sündmuse ajal. Skripti saab kasutada registreerimisväljadel, sisselogimisvormidel jne. Saate keelata konkreetsed märgid või tegelaste rühma. Näiteks saate täielikult keelata numbrite sisestamise, keelata tühikud, tabeldusmärgid ja keelata kirillitsa või ladina tähestiku.

200?"200px":""+(this.scrollHeight+5)+"px");">

["0-9",":"] – märgid, mille sisestamine sellele väljale on keelatud. Lisatud jutumärkidesse, eraldatud komadega.

Tegelaste rühmad

"0-9" või "\d" - arvväärtused
"a-ya" - kirillitsa tähestiku väikesed tähed
"A-Z" - kirillitsa tähestiku suured tähed
"A-ya" - kõik kirillitsa tähed
"a-z" - väikesed ladina tähed (esimene täht on ladina)
"A-Z" - ladina tähestiku suurtähed (ladina tähestiku esimene täht)
"A-z" - kõik ladina tähed (esimene täht on ladina)
"A-ya" - kõik tähed (esimene täht on ladina)
"\w" - kõik tähed, numbrid ja sümbol "_"
"\s" - tühik, tabeldusmärk ja lõik

Tähelepanu! Selle materjali kopeerimine ilma veebisaidile viitamata on keelatud

Allikas/ Borat

Üks levinumaid ülesandeid. Kas soovite kaitsta vormi jutumärkide ja kaldkriipsude tippimise eest või soovite kohest transliteratsiooni. Kuidas siis muidu saab vormi sisu kliendi poolel soovitud järjekorda panna?

Kuidas keelata teatud märkide sisestamine või asendamine väljale või tekstialale JS? Loogika on lihtne - loome esimese massiivi tähemärkidega, mida tahame asendada, ja seejärel teise - nendega, mille sisestame esimeste asemel. Kokku: kaks massiivi sama(!) elementide arvuga.

var transChars = new Array(""",""");

{

var from = nimivorm;

Var kuni = "";
var len = alates.pikkus;
var märk, isRus;
jaoks (var i = 0; i< len; i++)
{

isRus = vale;
jaoks (var j = 0; j< rusChars.length; j++)
{

{
isRus = tõsi;
murda;
}
}

}

}
Saate massiive täita oma asendussümbolitega. Kõik, mida vajate! Allpool on näited.

Kui tahame asendada näiteks kirillitsa tähestiku ladina tähtedega või lihtsamalt öeldes kohe translitereerida) Vaadake allpool:

Var rusChars = new Array("A","a","B","b","C","c","D","g","D","d","E", "e", "Ё", "e", "Zh", "zh", "Z", "z",


"Sh", "sh", "Shch", "shch", "E", "e", "Yu", "yu", "Ya", "ya", "Y", "y", "b " ","b");



"sh","sh","csh","csh","e","e","u","u","ya","ya","i","i","" """);
Kui tahame väljal teatud märgid asendada - ühe- ja topeltjutumärgid ülakomaga, mis andmebaasi salvestatuna ei võimalda meil saada valeandmeid).

Var rusChars = new Array(""","\"");
var transChars = new Array(""",""");

Kuidas kutsuda välja märkide asendamise funktsiooni? Lisage sisendi või tekstiala lõppu järgmine. Esimene väärtus on vormi identifikaator, teine ​​on sisestatud tähemärkidega väli, kolmas - kui soovime kuvada märke mõnel muul väljal, siis märgime teise välja identifikaatori. Võite jätta sama ID)

Onblur="convert("vormi nimi", "kust me seda muudame", "kuhu asendame sisestame");"
Noh, allpool on näide failidega töötamise ja demo vaatamise kohta!

Mitmed demonäited märkide asendamise kohta sisestusväljadel

Asendage teatud märgid sisestusväljal JS-i abil

var rusChars = new Array("A","a","B","b","C","c","D","g","D","d","E", "e", "Ё", "e", "Zh", "zh", "Z", "z",
"I", "i", "Y", "y", "K", "k", "L", "l", "M", "m", "N", "n", "O" " ","o", "P", "p",
"R", "r", "S", "s", "T", "t", "U", "u", "F", "f", "X", "x", "H" " ","ch", "Ts", "ts",
"Sh", "sh", "Shch", "shch", "E", "e", "Yu", "yu", "Ya", "ya", "Y", "y", "b " ""b",""","\"");
var transChars = new Array("a", "a", "b", "b", "v", "v", "g", "g", "d", "d", "e", "e", "jo", "jo", "zh", "zh", "z", "z",
"i","i","y","y","k","k","l","l","m","m","n","n","o" ","o","p","p",
"r", "r", "s", "s", "t", "t", "u", "u", "f", "f", "h", "h", "ch" ""ch","ts","ts",
"sh","sh","csh","csh","e","e","u","u","ya","ya","i","i","" ","","","");

Funktsioon convert(the_vorm, conv_froms, conv_to)
{
var nameForm = document.forms.value;
var from = nimivorm;

Var kuni = "";
var len = alates.pikkus;
var märk, isRus;
jaoks (var i = 0; i< len; i++)
{
märk = from.substr(i,1);
isRus = vale;
jaoks (var j = 0; j< rusChars.length; j++)
{
if (märk == rusChars[j])
{
isRus = tõsi;
murda;
}
}
+= (isRus) ? transChars[j] : märk;
}
document.forms.value = kuni;
}

Kohe ühes valdkonnas

Ühelt teisele

Skriptide olemus, mida me edaspidi kaalume, on külastaja tegevuse käigu pealt tabada ja keelata tal teatud väljale midagi sisestada, välja arvatud numbrid. See tähendab, et kui kursor on fokuseeritud väljale, kui proovite klaviatuuril tähti vajutada, ei juhtu väljal midagi, samal ajal saate sisestada numbreid ja mõningaid sümboleid, näiteks + - () jne. , mida võib vaja minna telefoninumbri või muu digitaalse numbri väljade jaoks.

Selle skripti toimimiseks vajate esmalt numbri sisestamise välja. Näiteks vormi sees on väli, mis näeb välja umbes selline:

Esimene skript kasutab jQueryt, seega peate lisama ühenduse jQuery teegiga oma saidi päises enne sulgevat päist või jaluses enne sulgevat keha. Kui tegite seda või sisuhaldussüsteem (saidi mootor) teeb seda, ei pea te seda tegema. Saate vaadata saidi lähtekoodi ja kui kuskil on sarnane rida, siis tuleb see samm vahele jätta. Kui ühendust pole, peate lisama järgmise rea:

Nüüd on kord skripti enda käes. Lisame selle eraldi faili ja lisame selle teegi järele või lisame siltidesse:

/// KOODI SIIA...

Noh, tegelik kood ise:

JQuery(document).ready(function($)( $.fn.forceNumbericOnly = function() ( return this.each(function() ( $(this).keydown(function(e)) ( var key = e.charCode | | e.keyCode || 0; return (võti == 8 || klahv == 9 || klahv == 46 ||(klahv >= 37 && klahv = 48 && klahv = 96 && klahv 57)) tagastab vale; ) ;

Isiklikult kasutan esimest koodi, see on minu jaoks mugavam. Millise neist valida, on ka teie otsustada.

See on kõik, tänan tähelepanu eest. 🙂

Eespool lubatud javascripti virtuaalsete võtmekoodide tabel.

Võti	10. kood	Võti	10. kood
Tagasilükkeklahv	8
Tab	9	Sisenema	13
Shift	16	Ctrl	17
Alt	18	Paus	19
CapsLock	20	Esc	27
ruumi	32	PageUp	33
PageDown	34	Lõpp	35
Kodu	36	vasak nool	37
nool üles	38	parem nool	39
nool alla	40	Sisestage	45
Kustuta	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	K	81
R	82	S	83
T	84	U	85
V	86	W	87
X	88	Y	89
Z	90	vasak Windowsi klahv	91
parem Windowsi klahv	92	Rakenduste võti	93
Numbriklahvistik 0	96	Numbriklahvistik 1	97
Numbriklahvistik 2	98	Numbriklahvistik 3	99
Numbriklahvistik 4	100	Numbriklahvistik 5	101
Numbriklahvistik 6	102	Numbriklahvistik 7	103
Numbriklahvistik 8	104	Numbriklahvistik 9	105
NumPad *	106	Numbriklahvistik +	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	Numeratsioonilukk	144
Kerimislukk	145	PrintScreen	154
Meta	157	;	186
=	187	,	188
-	189	.	190
/	191	~	192
[	219	\	220
]	221	"	222

Sain üsna standardse ülesande: filtreerida kasutaja poolt sisendisse sisestatud märgid, st kasutaja saab sisestada reale numbrite ja tähtede komplekti, näiteks “5s68d.4r55e.6t5” ja serverisse I säästmiseks tuleb saata õige summa rublades - "568.455" (rubla).

Sain ülesandega üsna kiiresti valmis, lisades sisendile fokusseerimissündmuse, kuid minu lahendusel oli mitmeid olulisi puudusi: kus selles näites lõpeb summa rublades ja algab kopikad? Kui kasutaja sisestab mitu miinust (sellisel juhul on õiged ka negatiivsed väärtused), siis millist miinustest tuleks lugeda rea ​​alguseks? Ja nii edasi.

Seetõttu ilmus skripti teine ​​​​versioon klahvivajutuse regulaaravaldistega:

$(e.currentTarget).val(($(e.currentTarget).val()).replace(/[^0123456789.-]/, ""))
Kuid nagu selgus, oli sellel meetodil märgatav puudus (ma ei pea silmas seda, et kasutaja näeb tähemärki, mille ta sisestab, ja siis see märk kaob), nimelt kui asetate kursori näiteks tähe keskele. sisestatud number sisendisse, sisesta täht, siis skript lõikab tähe välja, kuid liigutab kursused rea lõppu.

Sel põhjusel käskis üks vanem sõber mul kirjutada klahvivajutuse jaoks funktsioon. 30 minuti pärast oli funktsiooni kolmas versioon valmis ja see nägi välja umbes selline:

Function() ( tagastab this.each(function() ( $(this).keydown(function(e) ( var key = e.charCode || e.keyCode || 0; // lubab tagasilükke, tabeldusklahvi, kustuta, sisesta , AINULT nooled, numbrid ja klahvistiku numbrid // kodu, lõpp, punkt ja numbriklahvistiku kümnendtagastus (klahv == 8 || klahv == 9 || klahv == 13 || klahv == 46 || klahv == 110 | | klahv == 190 || (klahv >= 35 && klahv = 48 && klahv = 96 && klahv