メインコンテンツへ移動
黯羽軽揚毎日少しずつ

JS 学習ノート 7_フォームスクリプト

無料2015-04-11#JS#表单

本記事では、フォーム要素の関連操作、フォームの 3 種類の送信方法、テキストの選択、リッチテキストボックスの実装などの内容について紹介します

##1. フォームおよびフォーム要素参照の取得方法##

var mForm = document.forms[formName];フォーム参照を取得

mForm.elements[elemName] フォーム要素を取得、同名の要素がある場合は要素のグループを取得します（例えば radio button）

##2. フォーム要素の一般的なプロパティ、メソッド、イベント##

プロパティ：

  • name：フィールド名

  • value：フィールド値

  • type：フィールドタイプ、例えば button、radio など

  • readOnly：読み取り専用を設定

  • disabled：無効を設定

メソッド：

  • focus()：フォーカスを取得

  • blur()：フォーカスをキャンセル

イベント：

  • focus：フォーカスを取得した時にトリガー

  • blur：フォーカスを失った時にトリガー

  • change：テキストボックス input とテキストエリア textarea はフォーカスを失い、value 値が変更された時にトリガー、ドロップダウンリスト select オプションが変更された時にトリガー

##3. フォーム送信の方法##

  1. ボタン送信

  2. コード送信：form.submit();

  3. Enter キー送信：textarea 以外の任意のフォームフィールドで Enter キーを押す

注意：

  1. コード送信は submit イベントをトリガーしません。そのため、フォームデータを事前に検証する必要があります

  2. コードリセットは reset イベントをトリガーしますが、実際のアプリケーションでは reset 機能はあまり使用されません。誤操作でリセットをクリックすると非常に困るためです

##4. いくつかの送信ボタン##

  1. 汎用送信ボタン：<input type="submit">

  2. カスタム送信ボタン：<button type="submit"></button>

  3. 画像ボタン：<input type="image" src=url>

  4. その他の非ボタン要素：<a href=url onclick="forms['mForm'].submit();">送信</a>

注意：高程書ではフォームに前 3 種類のボタンのいずれかがある場合のみ、Enter キーを押すとフォームが送信されると記載されていますが、当方の IE8、FF、Chrome でのテストではすべて送信可能でした（フォームにテキストボックスのみがある場合でも、Enter キーで送信可能）

##5. テキストボックス/テキストエリア（input/textarea）の一部/全部の選択##

主流の方法：

var text = document.forms[0].elements['userName'];
text.select();//全选
text.setSelectionRange(0, 3);//选择前 3 个字符（3 个汉字或者字母）

[IE8-] では、選択テキストの設定/取得方法が主流の方法と異なります。選択設定の方法は以下の通り：

var range = text.createTextRange();
range.collapse();//把范围折叠到开始位置
range.moveStart('character', 0);
range.moveEnd('character', 3);
range.select();

P.S. 選択は自動補完テキストボックスの実装でよく使用されます。例えばブラウザの URL 入力ボックス

##6. クリップボードへのアクセス##

クリップボードへのアクセスについては、各ブラウザの実装に差異があり、一部のブラウザはクリップボードへのアクセスをサポートしていません。そのため、不適切なクリップボード内容を変更して検証を通過させようとするのではなく、これらのイベントのデフォルト動作を阻止すべきです。必要に応じてキーボードショートカットを無効化することもできます

paste/cut/copy イベントのデフォルト動作をキャンセルすることでクリップボードを無効化できます

##7. select の一般的なプロパティとメソッド##

プロパティ：

  • options：select のすべての Option を取得
  • selectedIndex：選択項目のインデックスを取得（選択されていない場合は -1、複数選択の場合は最初の選択項目のインデックス）

メソッド：

  • add(newOption, relOption); relOption の前に newOption を挿入
  • remove(index); インデックスが index の Option を削除

##8. option の一般的なプロパティとメソッド##

プロパティ：

  • selected：選択を設定

  • index：该项在 options 中的索引

メソッド：

  • Option の追加：

     var newOption(text, value);//一般 text 和 value 相同，value 用于提交数据
 selectbox.add(newOption, undefined);//在末尾插入

  • Option の削除：

     selectbox.remove(index);//移除第 index 项
 while(selectbox.options.length){//移除所有项
   selectbox.remove(0);
 }

##9. リッチテキストボックスを実装する 2 つの方法##

  1. iframe を挿入し、src を空のドキュメントに設定し、frames[iframeName].document.designMode = 'on'; を設定すると body を編集可能にできます

  2. 任意の要素の contentEditable 属性を設定します。例えば p.contentEditable = 'true'; とすると任意の要素を編集可能にできます

注意：

  1. 上記の 2 つの方法は全ブラウザ互換です。contentEditable が HTML5 属性であることを心配する必要はありません。IE は何年も前にこれを実装しており、当方のテストでは [IE6+] すべてサポートしています

  2. contentEditable は大文字の E に注意してください。小文字では無効です

  3. リッチテキストボックスはフォーム要素ではないため、自動的に送信されません。隠しフォームフィールドを使用してリッチテキストコンテンツを運ぶ必要があります

  4. リッチテキストボックスコンテンツのフォーマット（太字、前景/背景色の設定など）をサポートしていますが、各ブラウザの具体的な実装は異なります。そのため、同じコマンドでも異なるテキストコンテンツが生成される可能性があります

コメント

コメントはまだありません

コメントを書く