Valitse tapahtumat HTML-muodossa. Ohjelmointilomakkeet

Asettaa käsittelijän tekstin valinnalle elementin sisällä tai, tai, käynnistää tämän tapahtuman. Tämä tapahtuma voi esiintyä vain elementeissä ja. Menetelmällä on kolme käyttötapausta:

Käsittelijä(tapahtumaobjekti) - funktio, joka asetetaan käsittelijäksi. Kutsuttaessa se vastaanottaa tapahtumaobjektin tapahtumaObject .

Käsittelijä(tapahtumaobjekti) - katso yllä.
eventData - käsittelijälle välitetyt lisätiedot. Ne on esitettävä objektilla muodossa: (fNimi1:arvo1, fNimi2:arvo2, ...) .

Voit poistaa asennetun käsittelijän unbind()-menetelmällä.

Kaikki kolme menetelmän käyttövaihtoehtoa ovat muiden menetelmien analogeja (katso edellä), joten kaikki select():n käytön yksityiskohdat löytyvät näiden menetelmien kuvauksista.

Kun tekstiä valitaan hiirellä, selaimet käynnistävät valintatapahtuman, kun valinta on valmis. Jos valinta tapahtuu painamalla ← → ↓-näppäimiä samalla, kun pidät Shift painettuna, tapahtuma tapahtuu aina, kun nuolipainike vapautetaan.

Saadaksesi valitun osan tekstistä sisään eri selaimet tarvitaan erilaisia ​​keinoja. FireFoxissa ja Google Chrome valitun osan toimittaa window.getSelection()- tai document.getSelection()-menetelmä, kun taas IE ja Opera tarjoavat halutun tekstin, kun kutsutaan document.selection.createRange()-metodia. Selaimien välinen versio näyttää tältä:

toiminto selectedText() ( if (window.getSelection) txt = window.getSelection().toString(); else if (document.getSelection) txt = document.getSelection(); else if (document.selection) txt = asiakirja.valinta .createRange().text;return txt)

Huomaa, että selectedText()-funktio ei toimi vain ja -funktiolle, se palauttaa valitun tekstin riippumatta siitä, missä elementeissä se on.

Esimerkki

// asenna valintatapahtumakäsittelijä elementille, jonka tunniste on foo $("#foo" ) .select (funktio () ( alert ("Foo-elementin sisällä käyttäjä on valinnut tekstin." ) ; ) ; // kutsuu select-tapahtumaa elementissä foo $("#foo" ) .select () ; // asenna toinen tapahtumakäsittelijä, tällä kertaa elementeille // lohkoluokan kanssa. Välitetään lisätiedot käsittelijälle $(.block" ) .select (( a: 12 , b: "abc" ) , function (eventObject) ( var externalData = "a=" + eventObject.data .a + ", b= " + eventObject.data .b ; alert ("Teksti valittiin elementin sisällä, jolla on lohkoluokka" + "Tiedot välitettiin tämän tapahtuman käsittelijälle: " + externalData ) ; ) );

luettelossa voi olla joko mahdollisuus valita vain yksi vaihtoehto tai useita vaihtoehtoja.

Jokainen säilö liittyy Select-luokan objektiin ja jokainen alisäiliö liittyy Option-luokan objektiin, joka on ominaisuus tästä esineestä luokka Valitse. Lisäksi Select-objektin ominaisuus on myös kokoelma vaihtoehtoja, jotka sisältävät kaikki sen alioptioobjektit. Listataan tärkeimmät ominaisuudet, menetelmät ja tapahtumat, jotka luonnehtivat näitä objekteja.

Valitse objekti Ominaisuudet Menetelmät Tapahtumakäsittelijät

vaihtoehdot koko pituus useita valittuIndeksi	tarkenna() sumea() lisää() poista()	onBlur onChange onFocus

Vaihtoehtoobjekti Ominaisuudet Menetelmät Tapahtumat

oletusValittu valittu indeksitekstiarvo	Ei	Ei

Emme kuvaile näiden kahden objektin kaikkia ominaisuuksia, menetelmiä ja tapahtumia. Pysähdytäänpä tyypillisiä tapoja käyttämällä niiden yhdistelmiä.

Optio-objektien luominen

Optio-luokan objekti on mielenkiintoinen, koska toisin kuin monet muut DOM:iin sisäänrakennetut JavaScript-objektit, on rakentaja. Tämä tarkoittaa, että ohjelmoija voi itse luoda Optio-luokan objektin:

opt = new Optio([ teksti, [ arvo, [ oletusValittu, [ valittu ]]]]);

jossa argumentit vastaavat tavallisten Optio-luokan objektien ominaisuuksia:

• teksti - tekstirivi, joka on sijoitettu säilöön (esimerkiksi: teksti);
• arvo - arvo, joka välitetään palvelimelle valittaessa Optio-objektiin liittyvää vaihtoehtoa;
• defaultSelected - onko tämä vaihtoehto valittu oletuksena (tosi / epätosi);
• valittu - käyttäjä valitsi vaihtoehdon (tosi / epätosi).

Ensi silmäyksellä ei ole kovin selvää, miksi ohjelmoija saattaisi tarvita tällaista objektia, koska Select-luokan objektin luominen on mahdotonta, eikä sitä siksi voida määrittää siihen. uusi kohde Vaihtoehto. Kaikki selitetään asiakirjassa olevan vaihtoehtoluettelon muuttamisesta Valitse objekti. Tämä voidaan tehdä, eikä Valitse vaihtoehdot -luettelon muuttaminen johda asiakirjan uudelleenmuotoiluun. Vaihtoehtoluetteloa muuttamalla voit ratkaista sisäkkäisten valikoiden luomisen ongelman, joita ei ole HTML-lomakkeissa ohjelmoimalla tavallisia valikoita (vaihtoehtoja).

Vaihtoehtoja ohjelmoitaessa tulee huomioida, että Optio-luokan objekteilla ei ole nimiominaisuutta, koska kontilla ei ole NAME -attribuutti. Näin ollen asiakirjaan upotettuja Optio-objekteja voidaan käyttää vain asetuskokoelman jäseninä.

Keräysvaihtoehdot

Sisäänrakennettu matriisi (kokoelma) on yksi Select-objektin ominaisuuksista. Tämän taulukon elementit ovat Option-luokan täysimittaisia ​​objekteja. Ne luodaan, kun selain lataa sivun. Optio-objektien lukumäärä, joka sisältyy luokan Select-objektiin document.f.s, löytyy käyttämällä vakiotaulukkoominaisuutta: document.f.s.options. pituus. Lisäksi itse Select-objektilla on sama ominaisuus: document.f.s. pituus - se on täysin identtinen edellisen kanssa.

Ohjelmoijalla on mahdollisuus paitsi luoda uusia Option-objekteja, myös poistaa selaimen jo luomia objekteja:

Ensimmäinen vaihtoehto Toinen vaihtoehto Kolmas vaihtoehto 5.3. Vaihtoehtojen poistaminen valikosta

SISÄÄN tässä esimerkissä Ladattaessa sivua palvelimelta meillä on kolme vaihtoehtoa. Näitä voidaan tarkastella avattavana vaihtoehtoluettelona. Kun olet napsauttanut "Poista" -painiketta viimeinen vaihtoehto"lomakkeessa on vain kaksi vaihtoehtoa jäljellä. Jos napsautat tätä painiketta uudelleen, vain yksi vaihtoehto jää jäljelle. Lopulta vaihtoehtoja ei jää enää ollenkaan, eli käyttäjä menettää mahdollisuuden valita. Kun nollauspainike -painiketta painetaan, vaihtoehtoja ei palauteta - vaihtoehdot katoavat jälkiä jättämättä.

Nyt voimme tehdä prosessista käännettävän Optio-konstruktorin avulla:

function RestoreOptions() ( document.f.s.options = new Optio("Vaihtoehto yksi","",true,true); document.f.s.options = new Option("Vaihtoehto kaksi"); document.f.s.options = new Optio("Vaihtoehto kolme"); palauttaa epätosi; ) Ensimmäinen vaihtoehto Toinen vaihtoehto Kolmas vaihtoehto 5.4. Vaihtoehtojen poistaminen ja lisääminen SELECT-valikosta

Sijoitimme vaihtoehtojen palautuksen FORM-kontin onReset-tapahtumakäsittelijään. Luotuja esineitä Optio-luokasta määritämme Select-luokan document.f.s-objektin. Tässä tapauksessa ensimmäinen vaihtoehto on valittava oletuksena (oletusSelected-argumentti on asetettu arvoon totta) mallintaaksesi käyttäytymistä, kun bootstrap sivuja.

Optio-objektin teksti- ja arvoominaisuudet

Tekstiominaisuus edustaa vaihtoehtoa vastaavassa valikossa näkyvää tekstiä. HTML-koodissa se sijaitsee - ja -tunnisteiden välissä. Arvo-ominaisuus sisältää tunnisteen VALUE-attribuutin arvon. Oletetaan esimerkiksi, että yksi luettelon vaihtoehdoista on kuvattu seuraavasti:

Vaihtoehto yksi

Sitten arvo tekstin ominaisuudet vastaavalla objektilla on "Option One" ja arvoominaisuudessa "n1".

Herää kysymys, miksi tarvitaan kahta omaisuutta? Tosiasia on, että valitun vaihtoehdon arvo siirretään palvelimelle. Jos säilössä ei ole VALUE-attribuuttia, arvoteksti .selectedIndex lähetetään palvelimelle ja palauttaa ensimmäisen valitun vaihtoehdon indeksin. Tässä tapauksessa on vaihtoehto: valittu ominaisuus jokaisessa Optio-objektissa. Se on totta, jos tämä vaihtoehto on valittu, ja muuten epätosi. Alla annetaan esimerkki.

Tapahtumakäsittelijä onChange objekti Valitse

Muutostapahtuma tapahtuu, kun käyttäjä muuttaa valintojaan. Jos kenttä on yhden vaihtoehdon valintakenttä, kaikki on yksinkertaista - katso edellinen esimerkki. Katsotaanpa, mitä tapahtuu, kun käsittelemme monivalintakenttää:

Hedelmät: omena banaani kiivi persikka
Valitut paikat: 5.5. onChange käsittelijä valittaessa useita vaihtoehtoja

Huomaa, että Muuta-tapahtuma tapahtuu, kun käyttäjä valitsee vaihtoehdon tai poistaa sen valinnan. Poikkeuksena on, että valinnat merkitään peräkkäin valinnan aikana (klikkaamalla hiiren painiketta yhtä elementtiä, siirtämällä hiiren viimeiseen elementtiin, vapauttamalla hiiren painikkeen). Tässä tapauksessa tapahtuma tapahtuu sillä hetkellä, kun käyttäjä vapauttaa hiiren painikkeen ja kaikki merkityt vaihtoehdot tulevat valituiksi.

valitut ja valitutIndeksin ominaisuudet

Optio-objektin teksti- ja arvoominaisuudet

Tekstiominaisuus edustaa vaihtoehtoa vastaavassa valikossa näkyvää tekstiä. HTML-koodissa se sijaitsee - ja -tunnisteiden välissä. Arvo-ominaisuus sisältää tunnisteen VALUE-attribuutin arvon. Oletetaan esimerkiksi, että yksi luettelon vaihtoehdoista on kuvattu seuraavasti:

Vaihtoehto yksi

Tällöin vastaavan objektin teksti-ominaisuuden arvo on yhtä suuri kuin ”Option one” ja arvo-ominaisuuden arvo ”n1”.

Herää kysymys, miksi tarvitaan kahta omaisuutta? Tosiasia on, että valitun vaihtoehdon arvo siirretään palvelimelle. Jos säilössä ei ole VALUE-attribuuttia, tekstiarvo lähetetään palvelimelle.

Select-objektin selectedIndex-ominaisuus palauttaa valitun valinnan numeron (numerointi alkaa nollasta).

Vaihtoehto: OneTwoChoose-indeksi:

Huomaa, että onChange-tapahtumakäsittelijässä viittaamme toiseen lomakeelementtiin. Päällä Tämä hetki sitä ei ole määritelty, mutta tapahtuma tapahtuu vain, kun valitsemme vaihtoehdon - tähän mennessä kenttä on jo määritetty.

Jos vaihtoehtoluettelo annetaan muodossa , ts. Kun mahdollisuus valita useita vaihtoehtoja kerralla, selectedIndex-ominaisuus palauttaa ensimmäisen valitun vaihtoehdon indeksin. Tässä tapauksessa on vaihtoehto: kunkin Optio-objektin valittu ominaisuus. Se on tosi, jos tämä vaihtoehto on valittuna, muussa tapauksessa epätosi. Alla annetaan esimerkki.

Muutostapahtuma tapahtuu, kun käyttäjä muuttaa valintojaan. Jos kenttä on yksi vaihtoehto valintakenttä, kaikki on yksinkertaista - katso edellinen esimerkki. Katsotaanpa, mitä tapahtuu, kun käsittelemme monivalintakenttää:

Hedelmät: omenapurkit, vipeakki
Valitut kohteet:

Esimerkki 5.5. onChange-käsittelijä valittaessa useita vaihtoehtoja (html, txt)

Huomaa, että Muuta-tapahtuma tapahtuu, kun käyttäjä valitsee vaihtoehdon tai poistaa sen valinnan. Poikkeuksena on, että valinnat merkitään peräkkäin valinnan aikana (hiiren painikkeen painaminen yhdessä elementissä, hiiren siirtäminen viimeiseen elementtiin, hiiren painikkeen vapauttaminen). Tässä tapauksessa tapahtuma tapahtuu, kun käyttäjä vapauttaa hiiren painikkeen ja kaikki merkityt vaihtoehdot tulevat valituiksi.