javascript快速入門15--フォーム

9733 ワード

JavaScript

ほとんどのWebページとユーザー間のインタラクションはフォームにおいて行われ、フォームにはテキストドメイン、ボタン、チェックボックス、プルダウンリストなどの多くのインタラクティブHTML要素がある.ドキュメントオブジェクトの階層図からは、フォームはドキュメントに含まれていますので、フォームにアクセスするには、まだdocumentオブジェクトを介してアクセスする必要があります.
フォームオブジェクト
フォームとは、フォームオブジェクトを取得するために、フォームラベルにID属性を付けて、Dcument.getElementByIdを使用して取得します.Dcument.getElementsByTagName(「form」)を使用して、すべてのフォームのセットを取得し、下付きでアクセスすることもできます.formタグにname属性を追加して、document.getElements ByTagNameを使ってアクセスすることもできます.以下のタグを使ってアクセスします.
実際には、0級DOM(0級DOMはいかなるDOM仕様でもなく、実際にはBOMの内容ですが、ブラウザで実行したほうがいいです.)より簡単にFromオブジェクトにアクセスする方法を提供してくれました.

    <form name="formName"></form>
    var fm = document.formName;//              
    // document.getElementsByTagName("form")    document.forms  
    var fm = document.forms[0];//     Form

フォーム要素にアクセス
Formオブジェクトにはelements属性があります.パッケージはformラベルの中にあるすべてのフォームコントロール(input、selectなどのラベルが含まれていますが、divなどのラベルは含まれていません.)の疑似配列です.

    var fm = document.forms[0];
    alert(fm.elements.length);//length

以前は、inputにアクセスするというラベルは他のタブにアクセスするのとあまり区別がなく、IDを使ってもいいです.また、classNameを使ってもいいです.しかし、フォームにいるときは、それらのnamを使ってアクセスしてもいいです.

    <form name="formName">
        <input name="textInput" type="text" value="   " />
    </form>
    alert(document.formName.textInput.value);

Formオブジェクト関連イベントおよび方法
フォームが提出されるとsubmitイベントが発生します.イベントの傍受を設定して、ユーザーがフォームを提出する時にフォームの内容を確認します.一方、ユーザーが入力に誤りがある場合、フォームの提出を阻止するには、イベント処理関数の中でreturn falseでいいです.正しい場合はフォームのsubmitメソッドを呼び出してフォームを提出してもいいです.フォームのsubmitメソッドを使うとsubmitイベント処理関数は実行されません.

    document.formName.onsubmit = function () {
        //    
        if (result) {
            this.submit();
        } else {
            return false;
        }
    };

フォームがリセットされると、リセットイベントが発生するが、このイベントの意味は大きくない.同時に、リセットの方法もあります.

    document.formName.onreset = function () {
        if (confirm("         ？")) {
            this.reset();
        } else {
            return false;
        }
    };

フォーム要素
ラジオボタンとチェックボックス
ラジオボタンとチェックボックスは共通の属性があります.チェックしたボタンが選択されているかどうかを指定します.異なるのは、複数の単一選択ボタンが同じグループに分けられ、一つしか選択されていない場合、このnameを使ってそれにアクセスすると、複数のボタンが同じ名前を使うので、一つの配列に戻ります.一方、単一選択ボタンが一つしかない場合、またこの要素に戻ります.

    var radios = document.formName.radios;//         name radios
    alert(radios.length);//        
    var one = document.formName.one;//    
    alert(one.checked);//

checkedに似ていますが、default Checked属性があります.HTMLでデフォルトで選択されたものを返しますか?
テキストボックス1行と複数行のテキストボックス
単一行テキストボックスであるtype属性をtextのinputラベルとし、複数行のテキストボックスであるtextareaは、他のinputラベルと同じように持つvalue属性の他に、defaultValue属性を備えてテキストボックスのデフォルトテキスト、つまりHTMLで指定されたvalue値を表しています.
テキストボックスにはもう一つの方法があります.テキストボックスのテキストを選択状態にすることができます.
アウトラインオブジェクト
フォーム要素の中で一番複雑なのはselectオブジェクトです.selectは複合オブジェクトで、optionタグを含み、optgroupタグを含むこともあります.selectは多く選ぶことができますが、ここでは単一選択だけを討論します.多く選んだのは似ています.

    //  ，  select      name（  ID    ， name   ）
    var select = document.formName.mySel;
    //           ，      selectedIndex
    alert(select.selectedIndex);//       0   
    //select    options        ，      option，         
    alert(select.options[select.selectedIndex].value);//      
    alert(select.options[select.selectedIndex].text);//text   option     
    //      select      option，    options.length
    // HTML DOM select      length  
    alert(select.length);//   options.length

選択したアイテムの値を取得します.

    var mySel = document.formName.mySel;
    alert(mySel.options[mySel.selectedIndex].value);
    //      
    alert(mySel.value);

selectオブジェクトにoptionを追加すると、document.creat ElementやapendChildなどの方法が使えますが、HTML DOMはより便利な方法を提供してくれます.

    var opt = new Option("      ","   ");//document.createElement("option");
    var select = document.formName.mySel;
    select.add(opt,select.options[0]);// opt      option   
    select.add(opt);// IE ，        ，  opt     
    //      FF    ，         
    select.add(opt,null);//   IE   
    //          ,     
    select.add(opt,select.options[select.length-1]);
    //  option   remove
    select.remove(1);//remove

options配列の最も特殊なところは、それが本物の配列と非常に似ていて、そのlengthを設定して要素を減らすことができます.また、要素を直接にある項に割り当てて修正することもできます.

    var opts = document.formName.mySel.options;
    opts[0]=new Option("Text","Value");
    opts.length=2;//         option
    opts[3]=new Options("ABC",123);//

Optionオブジェクトもdefault Selected属性があります.HTMLではデフォルトの中の項目を指定しますか?
フォーム要素特性イベント
フォームコントロールがフォーカスを失うとblurイベントが発生し、コントロールがフォーカスを得ると時又でfocusイベントが発生します.これに対応して、blur方法はフォームコントロールに焦点を失わせ、focus方法はコントロールに焦点を合わせさせ、Formオブジェクトのsubmit方法と同様に、JavaScriptを使ってblur方法とfocus方法を実行することで、関連イベントの傍受関数をトリガしない.
selectオブジェクトのchangeイベント:ユーザーがオプションを選択したり、オプションの選択をキャンセルしたりすると、changeイベントが発生します.
textareaオブジェクトのchangeイベント:ユーザーがテキストエリアの値を変更し、キーボードの焦点を他の場所に移して「確認」することによって、changeイベントが発生します.
selectイベント:テキストボックスのテキストが選択されたときに発生します.

javascriptはword文書にヘッダーカバーを打ちます.