Előfordul, hogy a beviteli mezőkre egészen speciális kéréseket kell alkalmaznunk, hogy mi az amit megengedünk (pl.: számok vagy betűk), és mi az, amiket tiltani szeretnék (pl.: speciális karakterek).
A magyar adószám erre egy jó példa, ahol csak számok szerepelhetnek, de megszabott helyeken van köztük egy elválasztó karakter, hogy átláthatóbb legyen, pl: 12345678-1-12.
Ahhoz, hogy ezt meglehessen valósítani nem elég a szoksásos <input type=”text”>, hiszen ott le kell korlátozni, hogy csak számok lehessenek. Ha csak számokra korlátozzuk le az <input type=”number”> esetében, akkor pedig csak egymás utáni számok lesznek, elválasztás nélkül.
Erre volt segítségem egy JavaScript könyvtár, a Cleave.js, ami a beviteli mezőket korlátozza le a saját feltételeink szerint.
- Létre kell hozni egy beviteli mezőt egyedi ID-vel.
- Hozzá kell adni a HTML fájl legvégéhez a letöltött cleave.js-t vagy CDN-ről is be lehet linkelni.
- Saját feltétel megírása a Cleave.js szabályai szerint.
<input type="text" id="Adoszam" >
<script src="~/Scripts/cleave/cleave.min.js"></script>
<script type="text/javascript">
var Adoszam = new Cleave('#Adoszam', {
blocks: [8, 1, 2],
delimiter: '-',
numericOnly: true,
});
</script>Eredmény:
Legutóbbi hozzászólások