MaskedTextField

MaskedTextField-komponentti tarjoaa konfiguroitavan tekstikentän, joka pakottaa muotoilusääntöjä ja validoimista. Se soveltuu erinomaisesti sovelluksiin, jotka vaativat eksofomia syötettä, kuten rahoitus-, sähköinen kaupankäynti- ja terveydenhuoltojärjestelmiin.

Perusteet

MaskedTextField-komponentin voi luoda parametreilla tai ilman. Voit määrittää alkuarvon, tunnisteen, paikkamerkkitekstin ja kuuntelijan tilanteissa, joissa arvo muuttuu.

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

Maskisäännöt

MaskedTextField muotoilee tekstisyötteen maskeilla - merkkijonoilla, jotka määrittävät, mitkä merkit ovat sallittuja jokaisessa kohdassa. Tämä varmistaa johdonmukaisen ja rakenteellisen syötteen esimerkiksi puhelinnumeroissa, postinumeroissa ja henkilöllisyysnumeroissa.

Tuetut maskimerkit

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

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

Virheelliset merkit jätetään huomiotta ilman ilmoitusta.
Lyhyt syöte täydennetään välilyönneillä.
Pidempi syöte katkaistaan sopimaan m askiin.

Esimerkkejä

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äydellinen syöttö sallittu

Jos maski sisältää vain X, kenttä käyttäytyy kuin tavallinen TextField, sallien kaikki tulostettavat syötteet. Tämä on hyödyllistä, kun haluat varata mahdollisuuden muotoiluun ilman tiukkoja merkkisääntöjä.

Näytä koodi

Java

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 kerroksen asiakaspuolen validoimista säännöllisten lausekkeiden avulla.

Käytä setPattern()-metodia soveltaaksesi mukautettua 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 täyttää määritellyn rakenteen, kuten pituuden tai sallitut merkit.

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

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

Säännöllisen lausekkeen muoto

Malli on oltava voimassa oleva JavaScriptin säännöllinen lauseke, kuten RegExp-tyypin käyttäminen. Lisätietoja löytyy HTML:n malli-attribuutin dokumentaatiosta.

Arvon palauttaminen

MaskedTextField sisältää palautusominaisuuden, joka nollaa kentän arvon ennalta määriteltyyn tai alkuperäiseen tilaan. Tämä voi olla hyödyllistä käyttäjän muutosten kumoamiseksi tai oletusarvoiseen syötteeseen palauttamiseksi.

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

Tapoja palauttaa arvo

Ohjelmallisesti kutsumalla restoreValue()
Näppäimistön kautta, painamalla ESC (tämä on oletus palautusnäppäin, ellei ohitetu kielilähettäjällä)

Voit määrittää palautettavan arvon setRestoreValue()-metodilla. Jos palautusarvoa ei ole asetettu, kenttä palautuu alkuperäiseen arvoon renderoinnin ajankohtana.

Näytä koodi

Java