MaskedTextField

MaskedTextField -komponentti tarjoaa konfiguroitavan tekstisyötteen, joka valvoo muotoilusääntöjä ja validointia. Se sopii hyvin sovelluksiin, joissa tarvitaan rakenteellista syötettä, kuten rahoitus-, verkkokauppa- ja terveydenhuoltojärjestelmissä.

Tätä komponenttia voidaan instansioida parametreilla tai ilman niitä. Voit määrittää alkupisteen, etiketin, paikkatekstin ja kuuntelijan, jos arvo muuttuu.

MaskedTextField field = new MaskedTextField("Tili-ID");
field.setMask("ZZZZ-0000")
  .setHelperText("Maski: ZZZZ-0000 - esimerkiksi: TALLA-2025");

Maskisäännöt

MaskedTextField muotoilee tekstisyötteen käyttämällä maskia - merkkijonoa, joka määrittelee, mitä merkkejä saa olla kullakin sijainnilla. Tämä varmistaa johdonmukaisen, rakenteellisen syötteen sellaisille asioille kuin puhelinnumerot, postituskoodit ja henkilötunnusmuodot.

Maskien soveltaminen ohjelmallisesti

Jos haluat muotoilla merkkijonoja saman maskisynnin avulla kentän ulkopuolella, esimerkiksi kun renderöit tietoja Table -komponentissa, käytä MaskDecorator -apuluokkaa.

Tuetut maskimerkit

Merkki	Kuvaus
`X`	Mikä tahansa tulostettava merkki
`a`	Mikä tahansa aakkosellinen merkki (suuraakkoset tai pienaakkoset)
`A`	Mikä tahansa aakkosellinen merkki; pienet kirjaimet muutetaan suuriksi
`0`	Mikä tahansa numero (0–9)
`z`	Mikä tahansa numero tai kirjain (suuraakkoset tai pienaakkoset)
`Z`	Mikä tahansa numero tai kirjain; pienet kirjaimet muutetaan suuriksi

Kaikki muut merkit maskissa käsitellään kirjaimina ja ne on kirjoitettava tarkasti. Esimerkiksi maski kuten XX@XX vaatii käyttäjältä merkin @ syöttämistä keskelle.

Virheelliset merkit ohitetaan hiljaa.
Lyhyt syöte täytetään välikohtia.
Pitkä syöte lyhennetään mahtuakseen maskiin.

Esimerkkejä

field.setMask("(000) 000-0000");     // Esimerkki: (123) 456-7890
field.setMask("A0A 0A0");            // Esimerkki: A1B 2C3 (Kanadan postinumero)
field.setMask("ZZZZ-0000");          // Esimerkki: ABCD-1234
field.setMask("0000-0000-0000-0000");// Esimerkki: 1234-5678-9012-3456

Täydellinen syöte sallittu

Jos maskissa on vain X, kenttä toimii kuten tavallinen TextField, salliessaan minkä tahansa tulostettavan syötteen. Tämä on hyödyllistä, kun haluat varata mahdollisuuden muotoilla ilman tiukkoja merkkisääntöjä.

Validointimallit

Vaikka maskit määrittävät syötteen rakenteen, voit yhdistää ne validointimalleihin pakottaaksesi tarkempia syöttösääntöjä. Tämä lisää ylimääräisen asiakaspinnan validoinnin käyttämällä säännöllisiä lausekkeita.

Käytä setPattern()-metodia soveltaaksesi tiettyä säännöllistä lauseketta:

field.setPattern("[A-Za-z0-9]{10}"); // Pakottaa 10-merkkisen alfanumeerisen koodin

Tämä varmistaa, että syöte ei ainoastaan vastaa maskia, vaan myös noudattaa määriteltyä rakennetta, kuten pituus tai sallitut merkit.

Tämä on erityisen hyödyllistä, kun:

Maski sallii liian paljon joustavuutta
Haluat pakottaa tarkan pituuden tai tietyn muodon (esim. heksadesimaali, Base64, UUID)

Säännöllisen lausekkeen muoto

Malli on oltava voimassa oleva JavaScript-säännöllinen lauseke, kuten käytetään RegExp-tyypissä. Lisätietoja löydät HTML:n malliattribuutin dokumentaatiosta.

Arvon palauttaminen

MaskedTextField sisältää palautustoiminnon, joka palauttaa kentän arvon ennalta määriteltyyn tai alkuperäiseen tilaan. Tämä voi olla hyödyllistä käyttäjän muutosten kumoamiseksi tai oletussyötteen palauttamiseksi.

field.setRestoreValue("ABC123");
field.restoreValue();

Tapoja palauttaa arvo

Ohjelmallisesti, kutsumalla restoreValue()
Näppäimistön kautta, painamalla ESC (tämä on oletuspalautusnäppäin, ellei sitä ole ylikirjoitettu tapahtumakuuntelijalla)

Voit asettaa palautettavan arvon setRestoreValue()-metodilla. Jos palautusarvoa ei ole asetettu, sekä restoreValue() että ESC asettavat kentän arvoksi null.