MaskedTextField

MaskedTextField-komponentin tavoitteena on tarjota mukautettava ja helposti validoitava tekstinsyöttö. Se soveltuu hyvin sovelluksiin, jotka vaativat muotoiltua syöttöä, kuten rahoitus-, verkkokauppa- ja terveydenhuollon sovelluksiin.

Perusasiat

MaskedTextField voidaan instansioida parametreilla tai ilman. Voit määrittää alkusarjan, etiketin, paikkamerkkitekstin ja kuuntelijan, jos arvo muuttuu.

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

Maskisäännöt

MaskedTextField muotoilee tekstisyöttöä maskin avulla - merkkijono, joka määrittää, mitkä merkit ovat sallittuja kussakin asemassa. Tämä varmistaa johdonmukaisen ja strukturoituneen syötön, kuten puhelinnumeroiden, postinumeroiden ja henkilötunnusten muotojen osalta.

Tuetut maskimerkit

Merkki	Kuvaus
`X`	Mikä tahansa tulostettava merkki
`a`	Mikä tahansa aakkosnumeerinen merkki (iso tai pieni)
`A`	Mikä tahansa aakkosnumeerinen 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

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

Virheelliset merkit jätetään huomiotta.
Lyhyt syöttö täydennetään välilyönneillä.
Pitkä syöttö katkaistaan sopimaan maskiin.

Esimerkkejä

field.setMask("(000) 000-0000");     // Esimerkki: (123) 456-7890
field.setMask("A00 000");            // Esimerkki: A1B 2C3 (kanadalainen 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, mikä sallii minkä tahansa tulostettavan syötteen. Tämä on hyödyllistä, kun haluat säilyttää mahdollisuuden muotoilla 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 validointia käyttäen säännöllisiä lausekkeita.

Käytä setPattern()-metodia soveltaaksesi mukautettua säännöllistä lausetta:

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

Tämä varmistaa, että syöte ei ainoastaan 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. heksadesimaali, Base64, UUID)

Säännöllisen lausekkeen muoto

Mallin on oltava kelvollinen JavaScript-säännöllinen lauseke, kuten RegExp-tyypissä käytetään. Lisätietoja löytyy HTML:n malli-attribuutin asiakirjasta.

Arvon palauttaminen

MaskedTextField sisältää palauttamisominaisuuden, joka palauttaa kentän arvon ennalta määriteltyyn tai alkuperäiseen tilaan. Tämä voi olla hyödyllistä käyttäjän muutosten peruuttamiseen tai oletusyhdisteeseen palaamiseen.

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

Tavat palauttaa arvo

Ohjelmallisesti kutsumalla restoreValue()
Näppäimistön avulla, painamalla ESC (tämä on oletuspalautusavain, ellei se kumota tapahtumakuuntelijalla)

Voit asettaa palautettavan arvon käyttämällä setRestoreValue(). Jos palautusarvoa ei ole asetettu, kenttä palautuu alkuperäiseen arvoonsa sen hetkellä, kun se renderöitiin.

Näytä koodi

Java