JavaScriptの高度なプログラミング（XV）

フォームスクリプト

フォームが送信ボタンをクリックして送信されると、ブラウザがイベントを提出トリガする前に、サーバーに要求を送信します。これは、私たちにフォームデータを検証し、フォームを許可するかどうかを決定するためにデータを提出する機会を与えてくれます。フォームの送信をキャンセルすることができ、このイベントのデフォルトの動作を妨げます。
JavaScriptでは、プログラム的に、提出（）メソッドは、フォームを送信することができます呼び出すプログラムで提出するイベントをトリガしないためにフォームを送信するので、このメソッドを呼び出す前に、フォームデータを検証することを覚えておいてください。
フォームが送信されたときに最大の問題が発生する可能性があり、それが提出されたフォームを繰り返すことです。この問題を解決するには2つあり：最初のフォームを提出した後、送信ボタンを無効にする、またはその後のフォームの送信をキャンセルすることをonSubmitイベントハンドラを使用します。
そして、フォームもJavaScriptのでリセットすることができますよう、フォームを送信し、その差は、reset（）メソッドは、リセットボタン、リセットトリガイベントをクリックすると同じになります呼び出しています。
フォームは珍しい需要リセットします。もっと一般的な方法は、ユーザーが前のページに戻ることができますので、[キャンセル]ボタンを提供することです。そして、すべての値に関係なく無差別フォームのリセットされません。
フォーカス（）メソッドを使用して、ユーザの注意は、ページ上の場所に描画することができます。例えば、ページがロードされたとき、フォーカスが最初のフィールドを形成します。初期のWeb開発では、その分野ではない読み取り専用のプロパティを構成するには、ぼかしを使って読み取り専用フィールドメソッドを作成することができます。
彼らは値の変更を失うことにフォーカスして値からフォーカスを受け取ったときに入力し、TEXTAREA要素の場合、変更はイベントをトリガします。選択要素の場合、限り、ユーザーは別のオプションを選択したとして、それが変更イベントをトリガします。（P418）
テキストボックスの数は、サイズ特性は、文字を表示することができ、テキストボックスで指定することができます。特性値によって、テキストボックスの初期値を設定し、テキストボックスの文字のMAXLENGTH特性指定された最大数を受信することができます。
マークの違いは何テキストボックスの複数行のテキストボックスかどうかが、彼らは、valueプロパティでユーザー入力を保存します。同時に2つのバージョンがテキストボックス内のすべてのテキストを選択するために使用されるselect（）メソッドをサポートボックス。（P422）
tabIndexのスイッチングフィールドには、現在の特性（タブ）数を示します。

keypressイベントの操作に応じて、テキストボックスに文字を挿入します。文字の特定の種類は、このイベントのデフォルト動作を防止することにより、マスクすることができます。（P424）

//非数値キーシールド
IF（/d/.test（に、String.fromCharCode（charCodeは））&& charCodeは> 9 &&！
Event.ctrlKey！）{ 
EventUtil.preventDefault（イベント）; 
}

JavaScriptが使用フォームフィールドの容易性を高めるために、多くの方法を使用することができます。最も一般的な方法は、ユーザーが現在のフィールドに記入されたときに、自動的に次のフィールドにフォーカスを切り替えています。通常、自動変速する前に、ユーザが長さを定義した入力データを持って知っている必要があります焦点を当てます。

（関数（）{ 
        関数tabForward（イベント）{ 
            イベント= EventUtil.getEvent（イベント）; 
            VAR対象= EventUtil.getTarget（イベント）; 
            IF（target.value.length == target.maxLength）{ 
                VAR形= target.form ; 
                {（; iはLEN <I ++はVAR I = 0、LEN = form.elements.length）のための
                    IF（form.elements [I] ==ターゲット）{ 
                        IF（form.elements [I + 1]）{ 
                            形。要素[I + 1] .focus（）; 
                        } 
                        リターン; 
                    } 
                } 
            } 
        }
        varのTextBox1 =のdocument.getElementById（ "txtTel1"）; 
        VaRのTextBox2を=のdocument.getElementById（ "txtTel2"）; 
        VaRのtextbox3 =のdocument.getElementById（ "txtTel3"）; 
        EventUtil.addHandler（TextBox1を、 "からkeyup"、tabForward）。
        EventUtil.addHandler（TextBox2を、 "からkeyup"、tabForward）。
        EventUtil.addHandler（textbox3、 "からkeyup"、tabForward）。
    }）（）;

アヤックスの出現により、フォームのシリアライズは、より一般的になってきて。JavaScriptでは、フォームフィールドタイプ属性は、一緒にシーケンスの実現の形の名前および値属性と一緒に、利用されてもよいです。フォームの送信時には、ブラウザがサーバーにデータを送信する方法です。
- 名前を付けて、フォームフィールドの値は、URLエンコードされた使用＆分離されます。
- フォームフィールドを無効に送信しないでください
- ただ、チェックボックスやラジオボタンを送ります
- タイプを送信しない「リセット」と「ボタン」ボタンです
- 単一のエントリの選択した各値について複数の選択肢の選択ボックス
- 、それは、送信ボタンを送信するフォームを送信する送信]ボタンをクリックしてください場合、そうでない場合、送信ボタンを送信しません
- select要素の値は、選択されたoption要素のvalue属性の値です。オプションの要素が値特性を持っていない場合は、テキスト値のオプション要素です。
リッチテキスト編集は、また、WYSIWYG（あなたは、あなたが得るものですWYSIWYGを参照してくださいどのような）と呼ばれます。この技術の本質は、IFRAMEがページ内の空白のHTMLページが含まれて埋め込まれています。designModeプロパティを設定することで、このギャップのHTMLページを編集、およびオブジェクトは、HTMLコードのページのbody要素で編集することができます。「オン」「オフ」（デフォルト）と：のdesignMode属性には2つの値があります。「オン」に設定すると、文書全体がなります（キャレット）を編集することができ、その後は同じワープロソフトを使用したいことがあります。
designModeプロパティは、ページが完全にロードされた後、設定ので、ページに含まれる、適切なタイミングでのonloadイベントハンドラのセットアップのdesignModeを使用する必要があります。（P438）
リッチテキストコンテンツを編集するための別の方法は、ページ上の任意の要素に属性contenteditableを使用することができ、その後、ユーザーはすぐに要素を編集することができ、のcontentEditableと呼ばれる特殊なプロパティを使用することです。
リッチテキスト、リッチテキストを操作すると、P439のページを見ることができるリッチテキストコンテンツを持つフォームを選択します。

オリジナル：ビッグボックス JavaScriptの高度なプログラミング（XV）

JavaScriptの高度なプログラミング（XV）

フォームスクリプト

おすすめ