Html vybrané události. Handler pro událost onChange objektu Select
seznam může být buď s možností vybrat pouze jednu možnost, nebo několik možností.Každý kontejner je přidružen k objektu třídy Select a každý podřízený kontejner je přidružen k objektu třídy Option, což je vlastnost tohoto objektu třída Vybrat. Vlastností objektu Select je navíc také kolekce voleb, která seskupuje všechny její podřízené objekty Option. Uveďme si hlavní vlastnosti, metody a události, které tyto objekty charakterizují.
|
možnosti velikost délka vícenásobná vybranáIndex |
focus() blur() add() remove() |
onBlur onChange onFocus |
|
defaultVybrána vybraná textová hodnota indexu |
Žádný | Žádný |
Nebudeme popisovat všechny vlastnosti, metody a události těchto dvou objektů. Zastavme se u typickými způsoby pomocí jejich kombinací.
Vytváření objektů OptionObjekt třídy Option je zajímavý, protože na rozdíl od mnoha jiných je integrován do DOM JavaScript objekty, má konstruktéra. To znamená, že programátor může sám vytvořit objekt třídy Option:
opt = new Option([ text, [ hodnota, [ defaultSelected, [ selected ]]]]);
kde argumenty odpovídají vlastnostem běžných objektů třídy Option:
- text - řádek textu, který je umístěn v kontejneru (například: text);
- hodnota – hodnota, která je předána serveru při výběru alternativy spojené s objektem Option;
- defaultSelected - zda je tato alternativa vybrána ve výchozím nastavení (true / false);
- vybráno - alternativa byla vybrána uživatelem (pravda / nepravda).
Na první pohled není příliš jasné, proč může programátor takový objekt potřebovat, protože nelze vytvořit objekt třídy Select a nelze mu tedy přiřadit nový objekt Option. Vše je vysvětleno, pokud jde o změnu seznamu alternativ pro objekt Select v dokumentu. To lze provést a změna seznamu Výběr alternativ nevede k přeformátování dokumentu. Změna seznamu alternativ umožňuje vyřešit problém vytváření vnořených nabídek, které neexistují ve formulářích HTML, programováním běžné menu(možnosti).
Při programování alternativ byste měli věnovat pozornost skutečnosti, že objekty třídy Option nemají vlastnost name, protože kontejner nemá Atribut NAME. K objektům Option vloženým do dokumentu lze tedy přistupovat pouze jako členové kolekce voleb.
Možnosti sběruVestavěné možnosti pole (kolekce) jsou jednou z vlastností objektu Select. Prvky tohoto pole jsou plnohodnotnými objekty třídy Option. Vytvářejí se při načítání stránky prohlížečem. Počet objektů Option obsažených v objektu document.f.s třídy Select lze zjistit pomocí standardní nemovitost pole: document.f.s.options. délka. Navíc samotný objekt Select má stejnou vlastnost: document.f.s. délka - je zcela identická s předchozím.
Programátor má možnost nejen vytvářet nové objekty Option, ale také mazat objekty již vytvořené prohlížečem:
První možnost Druhá možnost Třetí možnost 5.3.
Odebírání možností z SELECT V v tomto příkladu Při načítání stránky ze serveru máme tři alternativy. Ty lze zobrazit jako rozevírací seznam možností. Po kliknutí na tlačítko "Smazat". poslední možnost
"ve formuláři zbývají pouze dvě alternativy. Pokud na toto tlačítko znovu kliknete, zůstane pouze jedna alternativa. V konečném důsledku nezbudou vůbec žádné možnosti, tj. uživatel ztratí možnost výběru. Když tlačítko reset po kliknutí se možnosti neobnoví - alternativy se beze stopy ztratí.
Nyní můžeme pomocí konstruktoru Option učinit proces reverzibilním:
function RestoreOptions() ( document.f.s.options = new Option("Option one","",true,true); document.f.s.options = new Option("Option two"); document.f.s.options = new Option("Option tři"); return false; ) První možnost Druhá možnost Třetí možnost 5.4. Odebírání a přidávání možností z SELECT Obnovu alternativ jsme umístili do obsluhy události onReset kontejneru FORM. Vytvořené objekty třídy Option, kterou přiřadíme objektu document.f.s třídy Select. V tomto případě musí být ve výchozím nastavení vybrána první alternativa (argument defaultSelected je nastaven na hodnotu true), aby se simulovalo chování při
bootstrapstránky.
Vlastnosti textu a hodnoty objektu Option
Vlastnost text představuje text zobrazený v nabídce, který odpovídá alternativě. V kódu HTML se nachází mezi značkami a. Vlastnost value obsahuje hodnotu atributu VALUE značky. Řekněme například, že jedna z možností v seznamu byla popsána jako: Možnost jedna odpovídající objekt bude mít "Option One" a vlastnost value bude mít "n1".
Nabízí se otázka, proč jsou potřeba dvě vlastnosti? Faktem je, že hodnota vybrané možnosti se přenese na server. V případě, že kontejner nemá atribut VALUE, je textová hodnota odeslána na server.selectedIndex vrátí index první vybrané možnosti. V tomto případě existuje alternativa: vybraná vlastnost na každém objektu Option. Je pravda, pokud tuto možnost je vybráno a v opačném případě má hodnotu false. Příklad bude uveden níže.
Psovod události onChange Vyberte objektK události Change dojde, když uživatel změní svůj výběr možností. Pokud je pole výběrové pole s jednou možností, pak je vše jednoduché – viz předchozí příklad. Podívejme se, co se stane, když se zabýváme polem s více možnostmi:
Ovoce: jablko banán kiwi broskev
Vybrané pozice: 5.5. obslužný program onChange při výběru více možností
Všimněte si, že událost Change nastane, když uživatel vybere nebo zruší výběr možnosti. Výjimkou je situace, kdy jsou možnosti označeny postupně během výběru (stisknutí tlačítka myši na jednom prvku, najetí myši na konečný prvek, uvolnění tlačítka myši). V tomto případě k události dojde, když uživatel uvolní tlačítko myši a všechny označené alternativy se stanou vybrány.
vlastnosti vybraných a vybranýchIndex
Vlastnosti textu a hodnoty objektu Option
Vlastnost text představuje text zobrazený v nabídce, který odpovídá alternativě. V kódu HTML se nachází mezi značkami a. Vlastnost value obsahuje hodnotu atributu VALUE značky. Řekněme například, že jedna z možností v seznamu byla popsána jako:
Možnost jedna
Potom bude hodnota vlastnosti text odpovídajícího objektu rovna „Option one“ a hodnota vlastnosti value bude rovna „n1“.
Nabízí se otázka, proč jsou potřeba dvě vlastnosti? Faktem je, že hodnota vybrané možnosti se přenese na server. Pokud kontejner nemá atribut VALUE, textová hodnota se odešle na server.
Vlastnost selectedIndex objektu Select vrací číslo vybrané možnosti (číslování začíná od nuly).
Možnost: Index OneTwoChoose:
Všimněte si, že v obsluze události onChange odkazujeme na druhý prvek formuláře. Na momentálně není definováno, ale událost nastane pouze tehdy, když vybereme možnost - v této době již bude pole definováno.
Pokud je seznam možností uveden jako , tzn. s možností vybrat více možností najednou vrátí vlastnost selectedIndex index první vybrané možnosti. V tomto případě existuje alternativa: vybraná vlastnost každého objektu Option. Je to pravda, pokud je tato možnost vybrána, jinak nepravda. Příklad bude uveden níže.
K události Change dojde, když uživatel změní svůj výběr možností. Pokud je pole výběrové pole s jednou možností, pak je vše jednoduché – viz předchozí příklad. Podívejme se, co se stane, když se zabýváme polem s více možnostmi:
Ovoce: jablečné konzervy, vipeach
Vybrané položky:
Příklad 5.5. onChange handler při výběru více možností (html, txt)
Všimněte si, že událost Change nastane, když uživatel vybere nebo zruší výběr možnosti. Výjimkou je situace, kdy jsou možnosti označeny postupně během výběru (stisknutí tlačítka myši na jednom prvku, najetí myši na konečný prvek, uvolnění tlačítka myši). V tomto případě k události dojde, když uživatel uvolní tlačítko myši a všechny označené alternativy se stanou vybrány.
Nastaví obslužnou rutinu pro výběr textu v rámci prvku nebo, nebo, spustí tuto událost. Tato událost se může vyskytovat pouze v a prvcích. Metoda má tři případy použití:
handler(eventObject) - funkce, která bude nastavena jako handler. Když zavolá, přijme objekt události eventObject.
handler(eventObject) - viz výše.
eventData - další data předaná handleru. Musí být reprezentovány objektem ve formátu: (jméno1:hodnota1, jméno2:hodnota2, ...) .
Nainstalovanou obslužnou rutinu můžete odebrat pomocí této metody unbind().
Všechny tři možnosti použití metody jsou analogy jiných metod (viz výše), takže všechny podrobnosti pomocí výběru() lze nalézt v popisech těchto metod.
Při výběru textu pomocí myši prohlížeče po dokončení výběru spustí událost select. Dojde-li k výběru stisknutím kláves ← → ↓ při podržení klávesy shift, pak k události dojde při každém uvolnění klávesy se šipkou.
Chcete-li dostat vybranou část textu různé prohlížeče požadovaný různé prostředky. V aplikaci FireFox a Google Chrome vybraná část bude poskytnuta metodou window.getSelection() nebo document.getSelection(), zatímco IE a Opera poskytnou požadovaný text při volání metody document.selection.createRange(). Verze pro různé prohlížeče bude vypadat takto:
funkce selectedText() ( if (window.getSelection) txt = window.getSelection().toString(); else if (document.getSelection) txt = document.getSelection(); else if (document.selection) txt = document.selection .createRange().text;return txt)
Všimněte si, že funkce selectedText() nebude fungovat pouze pro a , vrátí vybraný text bez ohledu na to, v jakém prvku (prvcích) se nachází.
Příklad// nainstaluje obsluhu události select pro prvek s identifikátorem foo $("#foo" ) .select (funkce () ( alert ("Uvnitř prvku foo, text byl vybrán uživatelem." ) ; ) ) ;
