Jistě jste již mnohokrát měli formulář s políčkem, do kterého je povoleno zadat jen určité znaky (např. jen číslice, alfanumerické znaky bez diakritiky atp.). Nejlepší řešení je do takového pole uživateli vůbec nedovolit nevhodné znaky napsat.
Já většinu JavaScriptu píši s použitím knihovny jQuery, takže jsem tuto úlohu řešil ve spolupráci s ní.
Nejdříve jsem hledal vhodný hotový plugin, abych znovu nevynalézal kolo. Nalezl jsem jen plugin aphanumeric, který se bohužel ukázal být nepoužitelným. On totiž funguje tak, že filtruje nevhodné znaky na základě seznamů, ve kterých má napsané znaky, které jsou či nejsou číslem. Takže stačí napsat něco, co v seznamu není, třeba písmeno s diakritikou, a ejhle – filtr nefunguje. Z takového řešení se jistě každému lepšímu programátorovi udělá nevolno:)
Nefunkční řešení jsem nepotřeboval, na rozdíl od toho funkčního, takže nezbylo nic jiného, než si takový plug-in napsat sám. Zde je výsledek mého snažení:
/*
* jQuery onlyChars
*
* Plug-in ktery kontroluje, zda jsou ve formularovem policku jen povolene znaky a nepovolene odstrani.
*
*
* Priklady pouziti:
* $('form input').onlyChars('\\d'); - parametrem je seznam povolenych znaku ve formatu vhodnem pro tridu v regularnim vyrazu (v tomto pripade se pro filtraci pouzije regularni vyraz "[^\\d]")
*
* $('form input').onlyFloat(); - pouziti preddefinovanych filtru
*
*
* Copyright (c) 2008 Michal Kandr www.kandr.name
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* $Date: 2008-10-06 14:31:17 $
* $Rev: 1 $
*/
(function($){
$.fn.onlyChars = function(p) {
return this.each(function(){
$(this).keyup(function(e){
if(e.keyCode != 37 && e.keyCode != 39 && e.keyCode != 16){
//puvodni hodnota
var oldVal = $(this).val();
//zjisteni pozice kurzoru
var oldCurPos;
var field = this.jquery ? this[0] : this;
if('selectionStart' in field){
//Gecko
oldCurPos = field.selectionStart;
} else {
//IE
field.focus();
var r = document.selection.createRange();
if (r == null) {
oldCurPos = 0
} else {
var re = field.createTextRange();
var rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
oldCurPos = rc.text.length;
}
}
//vyhozeni nevyhovujicich znaku
$(this).val($(this).val().replace(new RegExp('[^'+p+']','g'),''));
var newVal = $(this).val();
//nastaveni pozice kurzoru na puvodni
if(oldCurPos > newVal.length){
oldCurPos = newVal.length+1;
}
if(newVal != oldVal){
--oldCurPos;
}
if(!$.browser.msie){
//Gecko
field.focus();
field.setSelectionRange(oldCurPos, oldCurPos);
} else {
//IE
var range = field.createTextRange();
range.move("character", oldCurPos);
range.select();
}
}
});
});
};
$.fn.onlyInt = function() {
return this.each(function(){
$(this).onlyChars('\\d');
});
};
$.fn.onlyIntS = function() {
return this.each(function(){
$(this).onlyChars('\\d+-');
});
};
$.fn.onlyFloat = function() {
return this.each(function(){
$(this).onlyChars('\\d,\.');
});
};
$.fn.onlyFloatS = function() {
return this.each(function(){
$(this).onlyChars('\\d,\.+-');
});
};
})(jQuery);
Filtrace funguje na základě regulárních výrazů, přesněji tříd znaků (udělat filtr na obecný regulární výraz by bylo řádově obtížnější), je to tedy naprosto spolehlivé. Dalším rozdílem oproti nalezenému řešení je filtrace až po vložení znaku. Což má sice nevýhodu v podobě objevení se znaku v políčku na krátký okamžik mezi vložením a vyfiltrováním (filtrování se neprovede okamžitě po vložení, prohlížeči chvíli trvá než zavolá filtrační funkci a provede ji), ale má to i velkou výhodu, a to funkčnost vkládání pomocí zkratky Ctrl+V (ta v plug-inu aphanumeric nefunguje).
Nejtěžší na celém skriptu ovšem nebyla samotná filtrace – to je jeden řádek kódu - ale zachování pozice kurzoru. Tuto úlohu řeší všechen ten kód kolem;)
Publikováno 17.01.2009 18:16 v sekci Webdesign
Trvalý odkaz
Komentářů: 0 (Zobrazit komentáře)
Článek ještě nikdo nekomentoval