TextField

Avaa ChatGPT:ssä

Varjo dwc-field 23.02

Java API

TextField-komponentti mahdollistaa käyttäjien syöttää ja muokata tekstiä yhdellä rivillä. Voit määrittää kentän näyttämään tietyn virtuaalinäppäimistön, kuten numeronäppäimistön, sähköpostisyötteen, puhelinnumerosyötteen tai URL-syötteen. Komponentti tarjoaa myös sisäänrakennetun validoinnin hylkäämään arvot, jotka eivät vastaa määritettyä tyyppiä.

Käyttötapaukset

Inheritance

This class is a Field component, and inherits its features and behaviors. For an overview of Field properties, events, and other important information, please refer to the Field documentation.

TextField soveltuu laajaan valikoimaan tilanteita, joissa tarvitaan tekstin syöttämistä tai muokkaamista. Tässä on joitakin esimerkkejä tilanteista, jolloin TextField-komponenttia kannattaa käyttää:

1. Lomakesyötteet: TextField-komponenttia käytetään yleisesti lomakkeissa käyttäjän syötteen, kuten nimien, osoitteiden tai kommenttien, tallentamiseen. TextField on paras käyttää sovelluksessa, kun syöte on yleensä lyhyt ja mahtuu yhdelle riville.

2. Hakuominaisuus: TextField-komponenttia voidaan käyttää hakulaatikon tarjoamiseen, jolloin käyttäjät voivat syöttää hakukyselyitä.

3. Tekstin muokkaus: TextField on ihanteellinen sovelluksille, jotka vaativat tekstin muokkaamista tai sisällön luomista, kuten asiakirjojen muokkaajia, chat-sovelluksia tai muistiinpanosovelluksia.

Tyypit

Voit määrittää TextField-komponentin tyypin käyttämällä setType()-metodia. Vastaavasti voit palauttaa tyypin käyttämällä getType()-metodia, joka palauttaa enum-arvon.

• Type.TEXT: Tämä on TextField-komponentin oletustyyppi, joka automaattisesti poistaa rivinvaihdot syötearvosta.

• Type.EMAIL: Tämä tyyppi on tarkoitettu sähköpostiosoitteiden syöttämiseen. Se validoi syötteen standardin mukaisen sähköpostikentän syntaksin mukaan. Lisäksi se tarjoaa yhteensopiville selaimille ja laitteille dynaamisen näppäimistön, joka helpottaa kirjoitusprosessia sisällyttämällä yleisesti käytettyjä näppäimiä, kuten .com ja @.

  huomio

  Vaikka tämä validointi vahvistaa sähköpostiosoitteen muotoa, se ei takaa, että sähköpostiosoite on olemassa.

• Type.TEL: Tämä tyyppi on tarkoitettu puhelinnumeron syöttämiseen. Kenttä näyttää puhelinnäppäimistön joillakin laitteilla, joissa on dynaamiset näppäimistöt.

• Type.URL: Tämä tyyppi on tarkoitettu URL-osoitteiden syöttämiseen. Se validoi, syöttääkö käyttäjä URL-osoitett, joka sisältää skeeman ja verkkotunnuksen, esimerkiksi: https://webforj.com. Lisäksi se tarjoaa yhteensopiville selaimille ja laitteille dynaamisen näppäimistön, joka helpottaa kirjoitusprosessia sisällyttämällä yleisesti käytettyjä näppäimiä, kuten :, / ja .com.

• Type.SEARCH: Yhden rivin tekstikenttä hakulausekkeiden syöttämiseksi. Rivinvaihdot poistetaan automaattisesti syötearvosta.

Näytä koodi

TextFieldView.java

Kentän arvo

TextField-komponentin arvo edustaa nykyistä käyttäjän syötettä merkkijonona. webforJ:ssä tämä voidaan saavuttaa käyttämällä getValue()-metodia tai päivittämällä ohjelmallisesti setValue(String)-metodilla.

//Aseta alkuperäinen sisältö
textField.setValue("Alkuperäinen sisältö");

//Hae nykyinen arvo
String text = textField.getValue();

Jos getValue()-metodia käytetään kentällä, jolla ei ole nykyistä arvoa, se palauttaa tyhjän merkkijonon ("").

Tämä käyttäytyminen on johdonmukaista sen kanssa, miten HTML <input type="text">-elementti tuo esiin arvonsa JavaScriptin kautta.

Yhdistä arvojen käsittely validointiin

Sovella rajoituksia, kuten kaavaa, minimipituutta tai maksimipituutta määrittääksesi, milloin arvoa pidetään kelvollisena.

Paikkamerkkiteksti

Voit asettaa paikkamerkkitekstiä TextField-komponentille käyttämällä setPlaceholder()-metodia. Paikkamerkkiteksti näkyy, kun kenttä on tyhj, auttaen käyttäjää syöttämään asianmukaista syötettä TextField-komponenttiin.

Valittu teksti

On mahdollista vuorovaikuttaa TextField-luokan kanssa saadakseen käyttäjän valitun tekstin sekä tietoa käyttäjän valinnasta. Voit hakea valitun tekstin TextField-komponentista käyttämällä getSelectedText()-metodia. Tätä käyttäytymistä käytetään yleisesti yhdessä tapahtuman kanssa.

TextField textField = new TextField("Syötä jotain...");
Button getSelectionBtn = new Button("Hae valittu teksti");

getSelectionBtn.onClick(e -> {
  String selected = textField.getSelectedText();
  System.out.println("Valittu teksti: " + selected);
});

Samoin on mahdollista hakea nykyinen valintaraja TextField-komponentista käyttämällä getSelectionRange()-metodia. Tämä palauttaa SelectionRange-objektin, joka edustaa valitun tekstin aloitus- ja lopetusindeksejä.

getSelectedText() vs tapahtumakuormitus

Vaikka voit kutsua getSelectedText()-metodia manuaalisesti tapahtumankäsittelijässä, on tehokkaampaa käyttää tapahtuman kuormassa annettuja valintatietoja—kuten SelectionChangeEvent—lisäämällä ylimääräisiä hakuehtoja.

Kaavan sovittaminen

Voit käyttää setPattern()-metodia määrittääksesi validointisäännön TextField-komponentille käyttäen säännöllistä lauseketta. Kaavan asettaminen lisää rajoituksen validointia, joka vaatii syötearvon vastaavan määritettyä kaavaa.

Kaavan on oltava kelvollinen JavaScriptin säännöllinen lauseke, kuten selain tulkitsee sen. u (Unicode) lippua käytetään sisäisesti varmistaakseen Unicode-koodipisteiden tarkkuuden. Älä kääri kaavaa eteenpäin vinoviivoihin (/), sillä niitä ei tarvita, ja niitä käsitellään kirjaimellisina merkkeinä.

textField.setPattern("[A-Za-z]{3}\\d{2}"); // esim. ABC12

Jos kaavaa ei ole annettu tai syntaksi on virheellinen, validointisääntöä ei noudateta.

Kontekstuaalinen apu

Kun käytät monimutkaisia kaavoja TextField-komponentille, harkitse yhdistämistä setLabel(), setHelperText() ja setTooltipText() -metodien kanssa antamaan lisävihjeitä ja ohjeita.

Minimipituus ja maksimi pituus

TextField-komponentti tukee rajoitusvalidointia käyttäjän syöttämän merkkimäärän perusteella. Tätä voidaan hallita käyttämällä setMinLength() ja setMaxLength() -metodeja. Käytä molempia metodeja määrittämään selkeä raja hyväksyttävien syötteiden pituuksille.

Pituusvaatimukset

Oletuksena kenttä näyttää viestin, kun syötearvo on voimassa, ilmoittamalla käyttäjälle, onko heidän tarpeen lyhentää tai pidentää syötettään. Tämä viesti voidaan korvata setInvalidMessage()-metodilla.

setMinLength()

Tämä metodi asettaa minimimäärän UTF-16-koodiyksiköitä, jotka on syötettävä, jotta kenttä voidaan katsoa kelvolliseksi. Arvon on oltava kokonaisluku, eikä sen pitäisi ylittää määritettyä maksimipituutta.

textField.setMinLength(5); // Käyttäjän on syötettävä vähintään 5 merkkiä

Jos syötteessä on vähemmän merkkejä kuin minimivaatimus, syöte epäonnistuu rajoitusvalidoinnissa. Tämä sääntö koskee vain, kun käyttäjä muuttaa kentän arvoa.

setMaxLength()

Tämä metodi asettaa maksimimäärän UTF-16-koodiyksiköitä, jotka on sallittu tekstikentässä. Arvon on oltava 0 tai suurempi. Jos ei aseteta tai asetetaan virheelliseen arvoon, maksimi ei ole voimassa.

textField.setMaxLength(20); // Käyttäjä ei voi syöttää yli 20 merkkiä

Kenttä epäonnistuu rajoitusvalidoinnissa, jos syötteen pituus ylittää minimipituuden. Kuten setMinLength()-metodilla, tämä validointi laukaistaan vain, kun käyttäjän muuttama arvo on muuttunut.

Parhaat käytännöt

Seuraavassa osiossa esitetään joitakin ehdotettuja parhaita käytäntöjä TextField-komponentin hyödyntämiseksi.

• Tarjoa selkeät etiketti ja ohjeet: Merkitse TextField-komponentti selkeästi, jotta käyttäjät ymmärtävät, minkä tyyppistä tietoa heidän tulisi syöttää. Tarjoa lisäohjeita tai paikkamerkkivälejä auttaaksesi käyttäjiä ja asettaaksesi odotuksia vaaditulle syötteelle.

• Oikeinkirjoitus ja automaattitäyttö: Kun mahdollista, harkitse oikaisun käyttämistä setSpellCheck()-metodin kanssa ja/tai automaattitäytön käyttöä TextField-komponentissa. Nämä ominaisuudet voivat auttaa käyttäjiä syöttämään tietoa nopeammin ja vähentämään virheitä tarjoamalla ehdotettuja arvoja aiempien syötteiden tai ennalta määrättyjen vaihtoehtojen perusteella.

• Esteettömyys: Hyödynnä TextField-komponenttia esteettömyys huomioiden, noudattaen esteettömyyden standardeja, kuten asianmukaista merkintää, näppäimistön navigointitukea ja yhteensopivuutta apuvälineiden kanssa. Varmista, että käyttäjät, joilla on esteitä, voivat vuorovaikuttaa TextField-komponentin kanssa tehokkaasti.