ugrás a tartalomhoz

Dátum ellenőrzés + szamárvezető

Bitman · 2008. Már. 30. (V), 13.30
Sziasztok!

Fejlesztek egy weblapot, és felmerült egy olyan igény, miszerint a dátum mezőkbe az adott formátumú dátumot úgynevezett szamárvezetős megoldással lehessen beírni - user oldali javascript a megoldás.
A dátum formátum: "2008. 03. 30."

A szamárvezető alatt azt értem, hogy alapesetben az adott input mező így nézzen ki:
____. __. __. És a billentyűn csak annyit kelljen beírni, hogy 20080330, és akkor automatikusan a fenti formátumban íródik be. Tehát a javascript minden szám beírásnál tulajdonképpen cseréli a következő alsóvonalat a beírt számra, és amikor a ". "-höz ért, akkor ugrik a következő _-ra.
Az alapeset ez lenne, azonban van, amikor már konkrét, adatbázisból vett dátumot kell esetleg átírni, és akkor ez a szám lenyomásnál cserélem a következő alsóvonalat az éppen beírt karakterre nem célravezető...

Próbáltam erre keresni valami publikus js-t, de nem találtam, csak ilyen alap dátum ellenőrző szkripteket, de hát nem is igazán tudom, hogy miként lenne érdemes erre rákeresni, gondoltam itt hátha találkozott már valaki ilyennel, és eszébe jut valakinek egy régi általa ismert megoldás..

Előre is köszönöm!

Üdv,
Ákos
 
1

Helytelen cím

Bitman · 2008. Már. 30. (V), 13.47
Így utólag elolvasva kicsit helytelenül fogalmaztam meg a téma címét, mely helyesen inkább "Text input, dátum formátumú szamárvezetővel" vagy valami hasonló lenne.

Ha egy moderátor olvassa ezt esetleg, akkor kérem javítsa.

A dátum ellenőrzés szerveroldalon már természetesen meg van oldva, ezzel nincs is semmi gond.
3

más

demo · 2008. Már. 30. (V), 15.14
esetleg ha három inputmezőt alkalmaznál és közéjük raknád a pontot?
Vagy mondjuk selectekkel dolgoznál...
4

Re:

Bitman · 2008. Már. 30. (V), 15.54
Szia!

Felmerült ez a megoldás is, azonban a viszonylag nagy számú dátum mező és az objekum orientált rendszer adottságai miatt minden template használat előtt szét kellett volna bontani a (szerkesztői) oldalanként 10-15 dátumot, majd beküldésnél egyesíteni.

Megoldható lett volna így is persze, de a megrendelőnek valószínűleg nem lett volna esztétikus - mondjuk nekem sem az, meg plusz meló.. :)

Aki meg nem használ JS-t, az biztonsági okokból jól teszi, viszont semmiféle hátrányt nem szenved, ő beírja kézzel a helyes formátumban a dátumot (input label alatt ott van megjegyzésben az engedett formátum), vagy az adott sitehoz engedélyezi a JS-ek futtatását...

Az előző hsz-ben lévő példa még tökéletesíthető lenne, pl:
- évek első számjegye 1 vagy 2 lehessen (bár a jelenlegi rendszerben 2k előtti dátum sem fordul elő)
- évek második számjegye 2k előtti dátum nem létezése esetén korlátozható lenne akár 0-ra is, de ez már csak szőrszálhasogatás.. :)

Viszont még:
- hónapok első számjegye 0 vagy 1 lehessen csak
- napok első számjegye 0,1,2,3 lehessen csak

De ennek megoldását az olvasókra bírom, mivel első átírási próbálkozásomra érdekes eredményeket produkált a szkript, (vettem fel plusz szabályokat, azonban azokat nem vagy nem megfelelően vette figyelembe), aztán végül rájöttem, hogy tök felesleges is, szerver oldal mindent megold egy hibaüzivel..
Aki hü**e azon meg nem lehet segíteni sem javascripttel, sem szerveroldali megoldásokkal :)
2

1 lehetséges megoldás

Bitman · 2008. Már. 30. (V), 15.12
Sziasztok!

Végül sikerült rátalálnom, miután beugrott a keresési kulcsszó: maszk.

Egy lehetséges megoldás:
Includolt JS fájlba tehető rész:
/*
**************************************
* Event Listener Function v1.4 *
* Autor: Carlos R. L. Rodrigues *
**************************************
*/
addEvent = function(o, e, f, s){
 var r = o[r = "_" + (e = "on" + e)] = o[r] || (o[e] ? [[o[e], o]] : []), a, c, d;
 r[r.length] = [f, s || o], o[e] = function(e){
 try{
 (e = e || event).preventDefault || (e.preventDefault = function(){e.returnValue = false;});
 e.stopPropagation || (e.stopPropagation = function(){e.cancelBubble = true;});
 e.target || (e.target = e.srcElement || null);
 e.key = (e.which + 1 || e.keyCode + 1) - 1 || 0;
 }catch(f){}
 for(d = 1, f = r.length; f; r[--f] && (a = r[f][0], o = r[f][1], a.call ? c = a.call(o, e) : (o._ = a, c = o._(e), o._ = null), d &= c !== false));
 return e = null, !!d;
 }
};

removeEvent = function(o, e, f, s){
 for(var i = (e = o["_on" + e] || []).length; i;)
 if(e[--i] && e[i][0] == f && (s || o) == e[i][1])
 return delete e[i];
 return false;
};



//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/forms/masked-input [v1.0]

//========================================================
// REQUIRES http://www.jsfromhell.com/geral/event-listener
//========================================================

MaskInput = function(f, m){
 function mask(e){
 var patterns = {"1": /[A-Z]/i, "2": /[0-9]/, "4": /[\xC0-\xFF]/i, "8": /./ },
 rules = { "a": 3, "A": 7, "9": 2, "C":5, "c": 1, "*": 8};
 function accept(c, rule){
 for(var i = 1, r = rules[rule] || 0; i <= r; i<<=1)
 if(r & i && patterns[i].test(c))
 break;
 return i <= r || c == rule;
 }
 var k, mC, r, c = String.fromCharCode(k = e.key), l = f.value.length;
 (!k || k == 8 ? 1 : (r = /^(.)\^(.*)$/.exec(m)) && (r[0] = r[2].indexOf(c) + 1) + 1 ?
 r[1] == "O" ? r[0] : r[1] == "E" ? !r[0] : accept(c, r[1]) || r[0]
 : (l = (f.value += m.substr(l, (r = /[A|9|C|\*]/i.exec(m.substr(l))) ?
 r.index : l)).length) < m.length && accept(c, m.charAt(l))) || e.preventDefault();
 }
 for(var i in !/^(.)\^(.*)$/.test(m) && (f.maxLength = m.length), {keypress: 0, keyup: 1})
 addEvent(f, i, mask);
};
Akkor természetesen szükségünk van egy formra, és azon belül legalább egy inputra, mely name paraméterének értékét a lenti javascriptbe kell beírni a megfelelő rule sorába, pl esetemben datum volt az input name paramétere, így f.datum lett. (ugye az f-be töltődnek be a form adatai)

HTML kódba, valahova a form elem zárása után teendő javascript:
<script type="text/javascript">

var f = document.forms[0];
MaskInput(f.datum, "9999. 99. 99.");
/*a lenti mezőket nem használom, csak a lehetőségek miatt hagytam itt*/
/*MaskInput(f.data, "99/99/9999");
MaskInput(f.etc, "Cc99-*C");
MaskInput(f.except, "E^abc");
MaskInput(f.only, "O^abc");
MaskInput(f.letra, "C^");
MaskInput(f.letra2, "C^ ");
MaskInput(f.numero, "9^abc");*/
</script>
Forrás, próbálgatóhely: Link

Remélem a jövőben ez majd segít valakinek :)

Üdv: Ákos
5

jquery-s megoldás

gex · 2008. Már. 31. (H), 14.03
http://digitalbush.com/projects/masked-input-plugin/ már ajánlottam pár helyen.
6

Re:

Bitman · 2008. Ápr. 7. (H), 22.45
Kedves Gex!

Köszönöm a linket, végül (of course) kicseréltem erre, és pontosan az valósítható meg vele, amit kértek. Bekattintok az input mezőbe, akkkor rögtön aláhúzásokkal jelzi, hogy hova mehet a beírás, hol vannak fix karakterek, stb. Normálisan kezeli az input alap értékét, akárhova belekattintok törölhető normálisan (a fenti talált megoldásomnál voltak a törléssel is problémák).

Ja és képzeld el, csoda történt: tetszett a megrendelőnek is :)

Bocsi, hogy csak most írtam, mert még a beírás napján olvastam délután, és estére át is heggesztettem a másik megoldást erre, írtam is, csak valamilyen oknál fogva eltünt a hsz-em, lehet csak fáradt voltam, és nem vártam meg, amíg elküldődik teljesen, hanem bezártam a böngészőt. Teljesen mind1. :)

Köszönöm a tökéletes megoldást!

Üdv,
Ákos