JS学習13(フォームスクリプト)

フォームの基礎知識
HTMLではフォームはform要素で表されていますが、JSではHTMLFormElementタイプに対応しています.これは同じHTMLELE mentから継承しています.またいくつかの自分の方法があります.

accept Charset:サーバが処理できる文字セット

action:要求を受け付けるURL

elements:フォーム内のすべてのコントロールのセット

enctype:要求された符号化タイプ

length:フォーム内のすべてのコントロールの数

method:送信するHTTP要求タイプは、通常getまたはpost

である.

name:フォームの名前

reset():すべてのフォーム領域をデフォルト値

にリセットする.

submit():提出フォーム

target:要求及び受信応答を送信するためのウィンドウ名

フォームは、一般的な方法でform要素を得る以外に、ページ内のすべてのフォームをDcument.formsによって取得することができます.このセットでは、数値インデックスまたはname値によって特定のフォームを取得することができます.

var firstForm = document.forms[0]; 
var myForm = document.forms["myForm"];
alert(firstForm.name);

フォームを送信
ユーザは送信ボタンまたは画像ボタンをクリックした場合、フォームを提出します.

<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
<input type="image" src="graphic.gif">

フォームに上記のいずれかのボタンがある場合、フォームの要素にフォーカスがある場合は、リターンを押してフォームを提出することができます.submitは同様にイベントタイプであり、イベント処理関数を設定することにより、キャンセルなどの行為を変更することができます.

EventUtil.addHandler(firstForm, "submit", function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
});

コードによりsubmit動作をトリガすることができますが、submitイベントはトリガされません.

firstForm.submit();

フォームをリセット
すべてのフォームデータを空にすることです.

<input type="reset" value="Reset Form">
<button type="reset">Reset Form</button>

これは同じようにリセットイベントをトリガします.

EventUtil.addHandler(form, "reset", function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
});

フォームをform.reset()メソッドでリセットすると、resetイベントが発生します.
フォームフィールド
各フォームにはelements属性があります.この属性はフォーム内のすべてのフォーム要素のセットが規則的です.位置とnameを通してアクセスできます.

alert(firstForm.elements[0].name);
alert(firstForm.elements["password"].name);
alert(firstForm.elements.length);

同じnameの要素があるなら、NodeList共有フォームフィールドの属性を返します.

disable

form:現在のフィールドに属するフォームのポインタを指し、読み取り専用

name:現在のフィールドの名前

readOnly:現在のフィールドは読み取り専用ですか?

tabIndex:現在のフィールドの切り替え番号

type:「checkbox」、「radio」

value:現在のフィールドはサーバの値に提出されます.この属性はファイルフィールドにとって読み取り専用で、ファイルを含むコンピュータ内のパス

です.
JSは彼らを動的に修正することができます.

var field = firstForm.elements[0];
field.value = "Another value";
alert(field.form === firstForm);
field.focus();
field.disabled = true;
field.type = "checkbox";

複数回のフォームの提出を避けるとsubmitイベントでのコミットボタンの無効化ができます.フォームフィールドの共有方法は、フォームフィールドごとに2つの方法focus()とblur()があります.focusは表示されていない属性にフォーカスできません.HTML 5はautfocus属性があります.共有フォームフィールドイベントblur change focus
テキストボックスのスクリプト
テキストボックスは2種類のinputとtextareaがあります.

<input type="text" size="25" maxlength="50" value="initial value">
<textarea rows="25" cols="5">initial value</textarea>

JSでは、value属性を使用して彼らのコンテンツを取得することができます.特に、テキストボックスの値を処理するときは、標準DOMを使用して特性またはテキストサブノードを修正しない方法で、value属性を使用すると、value属性の値(最終的にサーバに提出される)と表示の値が一致することが保証されます.
テキストを選択
上記の2つのテキストボックスは、テキストボックス内のすべてのテキストを選択するためのselectメソッドをサポートしています.これは入力ボックスにフォーカスを移動したときに自動的にテキストを選択します.

var field = firstForm.elements[1];
EventUtil.addHandler(field, "focus", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();
});

イベント選択テキストボックス内のテキストを選択するか、select()を使用すると、selectイベントが発生します.選択したテキストを取得するHTML 5では、この2つの属性を用いてセレクション・スタート、セレクション・エンドを用いて選択されたテキストを取得する.IE 8および以下はサポートされていません.代替案を使用して、ユーザーがページ上で何を選択してもdocument.selectionオブジェクトを作成します.

EventUtil.addHandler(field, "select", function(event){
    console.log(getSelectedText(field));
});
function getSelectedText(textbox) {
    if (typeof textbox.selectionStart == "number") {
        return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
}

テキストの一部を選択する先ほどのselectメソッドは、テキスト全体のみを選択し、2つのパラメータが選択される最初の文字の索引と最後の文字の索引を受信する方法です.そして焦点を移してこそ見えます.

textbox.setSelectionRange(0, 3);
text.focus();

IE 8はサポートしないし、範囲のセットを使うべきです.

function selectText(textbox, startIndex, stopIndex){
    if (textbox.setSelectionRange){
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange){
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);
        range.moveEnd("character", stopIndex - startIndex);
        range.select();
    }
    textbox.focus();
}
selectText(text,0,3);

フィルタ入力
シールドは、キーレスのデフォルトイベントを阻止することによって、ユーザーの入力を阻止します.このようにすべての文字は入力できません.しかし貼り付けは、入力方法などで入力しても、keydownイベント用のctrlの貼り付けで阻止されます.

EventUtil.addHandler(textbox, "keypress", function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
});

特定の文字に対しては、数字キーだけを遮蔽するような特定の操作ができます.

EventUtil.addHandler(text, "keypress", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
        EventUtil.preventDefault(event);
    }
});

クリップボードを操作するには、クリップボードに属する6つのイベントがあります.

beforecopy

copy

beforecut

cut

beforepaste

paste

beforecopy、beforecut、beforepaste、IEの中でずっと本当の複製が貼る前に触発されることができて、その他のブラウザの中であまり使いにくいようです.他の3つだけで十分です.このイベントでは、clipboardDataを使ってクリップボードにアクセスします.IEではwindow.clipboardData、その他はevent.clipboardDataと互換性が必要です.3つの方法があります.get Data()、set Data()、clearData()、彼らが受信したパラメータはデータタイプで、ブラウザ間にも違いがあります.

getClipboardText: function(event){         
    var clipboardData = (event.clipboardData || window.clipboardData);         
    return clipboardData.getData("text");     
},
setClipboardText: function(event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){             
        return window.clipboardData.setData("text", value);         
    }     
}

クリップボードのイベントの時に呼び出して、コピー＆ペーストの内容をコントロールすることができます.

EventUtil.addHandler(text, "paste", function(event){
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);
    if (!/^\d*$/.test(text)){
        EventUtil.preventDefault(event);
    }
});

オートフォーカス
便利な機能です.

(function(){ function tabForward(event){ event = EventUtil.getEvent(event);  var target = EventUtil.getTarget(event); if (target.value.length == target.maxLength){ var form = target.form; for (var i=0, len=form.elements.length; i < len; i++) {  if (form.elements[i] == target) { if (form.elements[i+1]){ form.elements[i+1].focus();  } return;  } } } } 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); })();

HTML 5制約認証API
JSから離脱してもJSがロードできなくても、HTML 5の特性で部分検証ができます.必須フィールド

<input type="text" name="username" required> 

他のタイプの入力フィールドには独自の検証があります.

<input type="email" name ="email"> 
<input type="url" name="homepage"> 

数値範囲はemail以外に、urlには「number」、「range」、「date time-local」、「date」、「moneth」、「week」がありますが、サポートはよくありません.数値タイプは普通min、max、ステップをサポートします.

<input type="number" min="0" max="100" step="5" name="count"> 
input.stepUp();     //  1 
input.stepUp(5);    //  5 
input.stepDown();   
input.stepDown(10);

入力モードという属性は正規表現です.

<input type="text" pattern="\d+" name="count"> 
var pattern = document.forms[0].elements["count"].pattern; 

この方法は、フォーム全体においても、あるフィールドにおいても使用されてもよい.有効にtrueを返します.validityはこの属性が対象です.なぜフィールドが有効か無効かをもっと詳しく教えます.このオブジェクトには一連の属性が含まれています.すべてブール値です.

customError:set CustomoValidityを設定したらtrueとなり、そうでなければfalse

となります.

pattern Mismatch:pattern

レンゲOverflow:max

レンゲUnderflow:min

stepmisMatch

tooLong

typemismatch:mail、url

valid:すべての、checkValidity()と同じ‰

valueMissing:required

if (input.validity && !input.validity.valid){     
    if (input.validity.valueMissing){
        alert("Please specify a value.")
    } else if (input.validity.typeMismatch){
        alert("Please enter an email address.");
    } else {
        alert("Value is invalid.");
    }
}

認証を無効にする

<form method="post" action="signup.php" novalidate>     
    <!-- -->  
</form> 
document.forms[0].noValidate = true; // 

またはボタン

<input type="submit" formnovalidate name="btnNoValidate"         value="Non-validating Submit"> 
document.forms[0].elements["btnNoValidate"].formNoValidate = true; 

ボックススクリプトを選択
選択ボックスは、selectとoption要素によって作成されます.selectはJSでHTMLSelectElementです.以下の属性と方法があります.

add(newOption、relOption):コントロールに新しいオプトモーション要素を挿入し、relOptionの前に位置します.

multiple:HTMLのmultipleです.複数の選択肢が許可されているかどうかを示しています.

optionsコントロール内のすべてのoptionのHTMLClection

Remove(index)

selectedIndex:選択されていない項目は-1

です.

size:選択ボックスにおける可視行数

OoptionはJSでHTMLOptionElementであり、データにアクセスするために、下記の属性と方法があります.

index

label

selected

text

value

フォームの順序付け
Ajaxの出現に伴い、フォームの順序付けは一般的な需要となっている.JSでは、フォームフィールドのtype属性を利用して、nameとvalueとともにフォームの順序付けを行うことができます.ブラウザがフォームをサーバに送信する前に:

は、フォームフィールドの名称と値をURL符号化し、

を使用して分割する.

は、無効なフォームフィールド

を送信しない.

チェックボックスとラジオボタンだけを送信します.

typeはリセットとbuttonのボタン

を送信しません.

複数選択ボックスの各選択値は、個々の項目

である.

select要素の値は、選択されたオプトモーション要素のvalue特性の値であり、option要素がvalueでないと、オプトモーション要素のテキスト値である.

function serialize(form){
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
    for (i=0, len=form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
            case "select-one":
            case "select-multiple":
                if (field.name.length){
                    for (j=0, optLen = field.options.length; j < optLen; j++){
                        option = field.options[j];
                        if (option.selected){
                            optValue = "";
                            if (option.hasAttribute){
                                optValue = (option.hasAttribute("value") ?
                                    option.value : option.text);
                            } else {
                                //  IE
                                optValue = (option.attributes["value"].specified ?
                                    option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" +
                                encodeURIComponent(optValue));
                        }
                    }
                }
                break;
            case undefined:
            case "file":
            case "submit":
            case "reset":
            case "button":
                break;
            case "radio":
            case "checkbox":
                if (!field.checked){
                    break;
                }
            default:
                if (field.name.length){
                    parts.push(encodeURIComponent(field.name) + "=" +
                        encodeURIComponent(field.value));
                }
        }
    }
    return parts.join("&");
}

リッチテキスト編集
埋めて待つ