MaskedTextField

MaskedTextField -komponentti tarjoaa konfiguroitavan tekstinsyötteen, joka pakottaa muotoilun säännöt ja validoinnin. Se on erityisen sopiva sovelluksille, jotka vaativat strukturoitua syötettä, kuten rahoitus-, verkkokauppa- ja terveydenhuoltojärjestelmille.

Perusteet

MaskedTextField voidaan luoda parametreilla tai ilman. Voit määrittää alkuarvon, etikettin, paikkamerkkitekstin ja kuuntelijan, jos arvo muuttuu.

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

Maskisäännöt

MaskedTextField muotoilee tekstisyötteen käyttäen maskia - merkkijonoa, joka määrittää, mitä merkkejä sallitaan kullakin paikalla. Tämä varmistaa johdonmukaisen, rakenteellisen syötteen esimerkiksi puhelinnumeroille, postinumeroille ja henkilöllisyysnumeroille.

Maskien soveltaminen ohjelmallisesti

Jos haluat muotoilla merkkijonoja samalla maskisyntaksilla kentän ulkopuolella, esimerkiksi kun renderöit tietoja Taulukossa, käytä MaskDecorator -hyötyluokkaa.

Tuetut maskimerkit

Merkki	Kuvaus
`X`	Mikä tahansa tulostettava merkki
`a`	Mikä tahansa aakkosnumeerinen merkki (isot tai pienet)
`A`	Mikä tahansa aakkosnumeerinen merkki; pienet kirjaimet muutetaan isoiksi
`0`	Mikä tahansa numero (0–9)
`z`	Mikä tahansa numero tai kirjain (isot tai pienet)
`Z`	Mikä tahansa numero tai kirjain; pienet kirjaimet muutetaan isoiksi

Kaikkia muita merkkejä maskissa käsitellään kirjaimellisesti ja ne on kirjoitettava tarkasti. Esimerkiksi maski kuten XX@XX vaatii käyttäjää syöttämään @ keskelle.

Virheellisiä merkkejä ei huomata.
Lyhyt syöte täydennetään välilyönneillä.
Pitkä syöte katkaistaan maskin mukaiseksi.

Esimerkit

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

Täysi syöte sallittu

Jos maski sisältää vain X, kenttä käyttäytyy kuin tavallinen Tekstikenttä, sallien minkä tahansa tulostettavan syötteen. Tämä on hyödyllistä, kun haluat säilyttää mahdollisuuden muotoiluun soveltamatta tiukkoja merkkisääntöjä.

Näytä koodi

MaskedTextFieldView.java

Validointikuviot

Vaikka maskit määrittävät syötteen rakenteen, voit yhdistää ne validointikuviot, jotta voit pakottaa tarkempia syotesääntöjä. Tämä lisää ylimääräisen kerroksen asiakaspuolen validointia, käyttäen säännöllisiä lausekkeita.

Käytä setPattern() -metodia soveltamaan mukautettua säännöllistä lauseketta:

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

Tämä varmistaa, että syöte ei vain vastaa maskia vaan myös noudattaa määriteltyä rakennetta, kuten pituutta tai sallittuja merkkejä.

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

Maski sallii liikaa joustavuutta
Haluat pakottaa tarkan pituuden tai tietyn muodon (esim. hex, Base64, UUID)

Säännöllinen lausekemuoto

Mallin on oltava kelvollinen JavaScript-säännöllinen lauseke, kuten RegExp -tyypissä käytetään. Voit löytää lisätietoja HTML-malliattribuutin asiakirjoista.

Arvon palauttaminen

MaskedTextField sisältää palautustoiminnon, joka nollaa kentän arvon esisäädettyyn tai alkuperäiseen tilaan. Tätä voidaan käyttää käyttäjän muutosten kumoamiseen tai palauttamiseen oletusyhteyksiin.

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

Tavat palauttaa arvo

Ohjelmallisesti, kutsumalla restoreValue()
Näppäimistön kautta, painamalla ESC (tämä on oletuspalautusnäppäin, ellei tapahtumakuuntelija ylikirjoita)

Voit asettaa palautettavan arvon setRestoreValue() -kumppanilla. Jos palautusarvoa ei ole asetettu, kenttä palaa alkuperäiseen arvoonsa, kun se renderoitiin.

Näytä koodi

MaskedTextFieldRestoreView.java