JavaScriptフォーム処理実現コード
14231 ワード
フォームの紹介
HTMLでは、フォームは要素で表されていますが、JavaScriptではフォームはHTMLFormElementタイプに対応しています.
//HTMLFormElementはHTMLElementを継承しています.したがって、HTML要素が持つデフォルトの属性を持っています.また、独自の属性と方法を持っています.HTMLFormElement属性と方法属性または方法は、accept Chersetサーバが処理できる文字セットを説明します.action受信要求のURL.elementsフォーム内のすべてのコントロールのセット.enctype要求の符号化タイプ.lengthフォーム内のコントロールの数.methodが送信するHTTP要求タイプは、一般的に「get」または「post」である.nameフォームの名前要求を送信し、応答を受け取るためのウィンドウ名.すべてのフォームをリセットします.submit()提出フォーム;
1.フォームオブジェクトを取得します.Dcument.getElementById('myForm')//IDを使って要素を取得します.Dcument.getElements ByTagName('form')[0]//form要素セットの最初の要素を取得します.document.forms[0]//formsの数字を使って要素を下付きで取得します.document.forms['myForm']//formsの名前を使って要素を下付きで取得します.
2.フォームの提出
(1).イベントオブジェクトを通して、submitのデフォルトの行動を阻止することができます.submitイベントのデフォルトの行為は、データを持って指定ページにジャンプすることです.
//フォーム処理では、フォーム内のすべての要素の集合であるHTMLDOMを使用することを推奨します. fm.elements[0]; //最初のフォームフィールド要素を取得します. fm.elements['user'] //name値を取得するのはuserのフォームフィールド要素です. fm.elements.length //すべてのフォームフィールドの数を取得します.
(1)共通のフォームフィールドの属性/要素以外のすべてのフォームフィールドは同じ属性のセットを持っています.属性 ディザブルを説明する ブール値は、現在のフィールドが無効にされているかどうかを示します.フォームm 現在のフィールドが属するフォームのポインタを指し、読み取り専用です.name 現在のフィールドの名前;readOnly ブール値は、現在のフィールドが読み取り専用かどうかを表します.tabIndex 現在のフィールドの切り替えを表します.タイプ 現在のフィールドのタイプ;value 現在のフィールドの値; fm.elements[0].value; //valueを取得して設定します. fm.elements[0].disabled=true; //現在のフィールドを無効にします
(2)共通のフォームフィールド方法 focus()を説明します フォームフィールドにフォーカスを合わせます.blur() 元素からフォーカスを移動します.
(3)共通のフォームフィールドイベント
イベント名 説明blur フィールドがフォーカスを失うとトリガされます.change と元素に対して、valueを変えて焦点を失う時にトリガします.要素に対して、オプションを変更するときにトリガします.br/>focus 現在のフィールドがフォーカスを取得するときにトリガします.select>
//一つはシングル行テキストボックスです.
//一つは複数行のテキストボックスです.
1.value値を取得する
//文字の上にvalueの値がありますが、ないですが、valueでそれらの値を取得できます.br/> var text Field=fm.elemens[0];
var arara Field=fm.elemens[1];
alert(text Field.value+'、'+araField.value); //＜input/＞と＜textarea＞のvalue値を得る;br/> //PS:フォームを使うvalueが一番オススメです.HTMLDOMの中の属性です.標準のDOMを使う方法はgetAttribute();
//理由は:value属性に対する修正は、必ずしもDOMに反映されないからです.
//defaultValue:元のvalue値を得る;値の変化によって変わることはない. alert(text Field.defaultValue) //最初に設定したvalue値を取得します.
2.テキストの選択
選択ボックスは要素とともに作成されます.
HTMLSelectElement対象
属性/方法 add(new,rel)を説明します 新しい要素を挿入し、位置を指定します.multiple ブール値は、複数の選択を許可しますか?options 元素のHTMLCollection集合;remove(index) 指定された場所のオプションを削除します.selectedIndex 0の選択項目に基づいた索引は、選択されていない場合は-1となります.size ボックスに表示される行数を選択します.
//DOMでは、各要素にHTMLOptionElementオブジェクトがあり、データにアクセスする.HTMLOptionElementオブジェクト属性説明index現在のオプションのoptionsセット内の索引;現在のオプションのラベルselectedブール値は、現在のオプションが選択されているかどうかを示します.textオプションのテキストvalueオプションの値
一つしか選択できない選択ボックスに対して、selectedIndex属性を使うのが一番簡単です.
selectedとselectedIndexの違い:1.selectedはリターンのブール値です.ですから、判断に使うのが一般的です.2.selectedIndexは数値を返します.設定と取得に一般的です.
(2).Option構成関数var option=new Option('北京text'、'北京value')city.apendChild(option)//IEに不具合が発生しました
(3)add()の方法を使ってオプションを追加します.var option=new Option('北京text'、'北京value')city.add(option,0)//0は、最初のビットに追加することを表します.PS:DOMで規定しています.add()の中で二つのパラメータが必要です.正しくインデックスしていないなら、第二のパラメータはnullを設定すればいいです.つまり、デフォルトで最後のオプションに移動します.ただし、IEで2番目のパラメータはオプションですので、nullを設定すると存在しない位置に入れ、行方不明になります.互換性のためにundefinedを伝達しても互換性があります.city.add(option,null)//IEが表示されませんでしたcity.add(option,undefined)//互換性;
4.削除オプション
選択ボックスはindex属性を提供し、現在のオプションのインデックス値を得ることができます.selectedIndexとの違いは、一つは選択ボックスオブジェクトの呼び出し、もう一つはオプションオブジェクトの呼び出しです.
HTMLでは、フォームは要素で表されていますが、JavaScriptではフォームはHTMLFormElementタイプに対応しています.
//HTMLFormElementはHTMLElementを継承しています.したがって、HTML要素が持つデフォルトの属性を持っています.また、独自の属性と方法を持っています.HTMLFormElement属性と方法属性または方法は、accept Chersetサーバが処理できる文字セットを説明します.action受信要求のURL.elementsフォーム内のすべてのコントロールのセット.enctype要求の符号化タイプ.lengthフォーム内のコントロールの数.methodが送信するHTTP要求タイプは、一般的に「get」または「post」である.nameフォームの名前要求を送信し、応答を受け取るためのウィンドウ名.すべてのフォームをリセットします.submit()提出フォーム;
1.フォームオブジェクトを取得します.Dcument.getElementById('myForm')//IDを使って要素を取得します.Dcument.getElements ByTagName('form')[0]//form要素セットの最初の要素を取得します.document.forms[0]//formsの数字を使って要素を下付きで取得します.document.forms['myForm']//formsの名前を使って要素を下付きで取得します.
2.フォームの提出
(1).イベントオブジェクトを通して、submitのデフォルトの行動を阻止することができます.submitイベントのデフォルトの行為は、データを持って指定ページにジャンプすることです.
addEvent(fm,'submit',function(evt){
preDef(evt);
});
if(e.ctrlKey && e.keyCode ==13){
fm.submit(); // ctrl enter ;
}
// PS: name="submit" id="submit" , submit() ;
addEvent(fm,'submit',function(evt){ // ;
preDef(evt);
setTimeout(function(){ // 3 ;
fm.submit();
},3000);
});
//
// : , ;
document.getElementById('sub').disabled = true; // ;
// : , ;
var flag = false; // ;
if(flag == true)return; // ;
flag = true; // , ;
// , ;
// , Web ; , , ;
// reset : type="reset" ; fm.reset() ;
// JS ;
addEvent(document,'click',function(){
fm.reset(); // JS ;
});//フォーム処理では、フォーム内のすべての要素の集合であるHTMLDOMを使用することを推奨します. fm.elements[0]; //最初のフォームフィールド要素を取得します. fm.elements['user'] //name値を取得するのはuserのフォームフィールド要素です. fm.elements.length //すべてのフォームフィールドの数を取得します.
(1)共通のフォームフィールドの属性/要素以外のすべてのフォームフィールドは同じ属性のセットを持っています.属性 ディザブルを説明する ブール値は、現在のフィールドが無効にされているかどうかを示します.フォームm 現在のフィールドが属するフォームのポインタを指し、読み取り専用です.name 現在のフィールドの名前;readOnly ブール値は、現在のフィールドが読み取り専用かどうかを表します.tabIndex 現在のフィールドの切り替えを表します.タイプ 現在のフィールドのタイプ;value 現在のフィールドの値; fm.elements[0].value; //valueを取得して設定します. fm.elements[0].disabled=true; //現在のフィールドを無効にします
(2)共通のフォームフィールド方法 focus()を説明します フォームフィールドにフォーカスを合わせます.blur() 元素からフォーカスを移動します.
(3)共通のフォームフィールドイベント
イベント名 説明blur フィールドがフォーカスを失うとトリガされます.change と元素に対して、valueを変えて焦点を失う時にトリガします.要素に対して、オプションを変更するときにトリガします.br/>focus 現在のフィールドがフォーカスを取得するときにトリガします.select>
// focus ;
// change ;
var bextbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox,'focus',function(evt){
evt = EventUtil.getEvent(evt);
var target = EventUtil.getTarget(evt);
if(target.style.backgroundColor != 'red'){
target.style.backgroundColor = 'yellow'; // ;
}
});
EventUtil.addHandler(textbox,'blur',function(evt){ // ;
evt = EventUtil.getEvent(evt);
var target = EventUtil.getTarget(evt);
if(/[^\d]/.test(target.value)){ // ;
target.style.backgroundColor = 'red'; // ;
}else{
target.style.backgroundColor = '';
}
});
EventUtil.addHandler(textbox,'change',function(evt){ // value ;
evt = EventUtil.getEvent(evt);
var target = EventUtil.getTarget(evt);
if(/[^\d]/.test(target.value)){
target.style.backgroundColor = 'red'; // ;
}else{
target.style.backgroundColor = '';
}
});//一つはシングル行テキストボックスです.
//一つは複数行のテキストボックスです.
1.value値を取得する
//文字の上にvalueの値がありますが、ないですが、valueでそれらの値を取得できます.br/> var text Field=fm.elemens[0];
var arara Field=fm.elemens[1];
alert(text Field.value+'、'+araField.value); //＜input/＞と＜textarea＞のvalue値を得る;br/> //PS:フォームを使うvalueが一番オススメです.HTMLDOMの中の属性です.標準のDOMを使う方法はgetAttribute();
//理由は:value属性に対する修正は、必ずしもDOMに反映されないからです.
//defaultValue:元のvalue値を得る;値の変化によって変わることはない. alert(text Field.defaultValue) //最初に設定したvalue値を取得します.
2.テキストの選択
// select() , , ;
textField.select(); // ;
//
// , , ;
// Firefox :setSelectionRange() ; : ;
textField.setSelectionRange(0,1); // ;
textField.setSelectionRange(0,textField.value.length); // ;
// IE8 , IE ;
var range = textField.createTextRange(); // ;
range.collapse(true); // ;
range.moveStart('character',0); // ,character ;
range.moveEnd('character',1); // ;
range.select(); // ;
//
function selectText(text,start,stop){
if(text.setSelectionRange){
text.setSelectionRange(start,stop);
text.focus();
}else if(text.createTextRange){
var range = text.createTextRange();
range.collapse(true);
range.moveStart('character',start);
range.moveEnd('character',sotp-start);
range.select();
}
}
// select() , select , ;
addEvent(textField,'select',function(){
alert(this.value); // IE this ;
});
//
// Firefox :selectionStart selectionEnd;
addEvent(textField,'select',function(){
alert(this.value.substring(this.selectionStart,this.selectionEnd));
});
// IE8 , :selection , document;
// ;
//
function getSelecText(text){
if(typeof text.selectioinStart =='number'){ // IE;
return text.value.substring(text.selectionStart,text.selectionEnd);
}else if(document.selection){ // IE;
return document.selection.createRange().text; // IE ;
}
}
// PS: :IE select , , ;
// alert() , ;
// ;
addEvent(textField,'select',function(){
// alert(getSelecText(this)); // ;
document.getElementById('box').innerHTML = getSelecText(this);
})
// , ;
addEvent(areaField,'keypress',function(evt){
var e = evt || window.event;
var charCode = getCharCode(evt); // ;
if(!/\d/.test(String.formCharCode(charCode)) && charCode>9 && !e.ctrlKey){
preDef(evt); // ;
}
});
// PS: , , / / ;
// Firefox, , 0;
// Safari3 , , 8, charCode>9 ;
// ctrl ;
// / ;
copy ;
cut ;
paste ;
beforecopy ;
beforecut ;
beforepaste ;
// / / , ;
addEvent(areaField,'cut',function(evt){
preDef(evt);
});
addEvent(areaField,'copy',function(evt){
preDef(evt);
});
addEvent(areaField,'paste',function(evt){
preDef(evt);
});
// , : ;
// , , , ;
// : CSS ;
style='ime-mode:disabled'; // CSS ;
areaField.style.imeMode='disabled'; // JS ;
// PS:Chrome , , ;
addEvent(areaField,'keyup',function(evt){
this.value = this.value.replace(/[^\d]/g,''); // ;
});
// , ( ), ;
// 1 ;
function tabForward(evt){
var e = evt || window.event;
var target = getTarget(evt);
// ;
if(target.value.length == target.maxLength){
// ;
for(var i=0; i
選択ボックスは要素とともに作成されます.
HTMLSelectElement対象
属性/方法 add(new,rel)を説明します 新しい要素を挿入し、位置を指定します.multiple ブール値は、複数の選択を許可しますか?options 元素のHTMLCollection集合;remove(index) 指定された場所のオプションを削除します.selectedIndex 0の選択項目に基づいた索引は、選択されていない場合は-1となります.size ボックスに表示される行数を選択します.
//DOMでは、各要素にHTMLOptionElementオブジェクトがあり、データにアクセスする.HTMLOptionElementオブジェクト属性説明index現在のオプションのoptionsセット内の索引;現在のオプションのラベルselectedブール値は、現在のオプションが選択されているかどうかを示します.textオプションのテキストvalueオプションの値
var city = fm.elements['city']; // HTMLSelectElement;
alert(city.options); // HTMLOptionsCollection;
alert(city.options[0]); // HTMLOptionElement;
alert(city.type); // select-one;
// PS: type :select-one, :select-multiple;
// HTML multiple ;
alert(city.options[0].text); // text, text ;
alert(city.options[0].value); // value, value ;
// PS: select , HTMLDOM, ;
// DOM, ;
// PS: value ,IE , text ;一つしか選択できない選択ボックスに対して、selectedIndex属性を使うのが一番簡単です.
addEvent(city,'change',function(){
alert(this.selectedIndex); // , 0 ;
alert(this.options[this.selectedIndex].text); // text ;
alert(this.options[this.selectedIndex].value); // value ;
});
city.selectedIndex = 1; // selectedIndex ;
selectedとselectedIndexの違い:1.selectedはリターンのブール値です.ですから、判断に使うのが一般的です.2.selectedIndexは数値を返します.設定と取得に一般的です.
addEvent(city,'change',function(){
if(this.options[2].selected == true){ // ;
alert(' !');
}
});
(2).Option構成関数var option=new Option('北京text'、'北京value')city.apendChild(option)//IEに不具合が発生しました
(3)add()の方法を使ってオプションを追加します.var option=new Option('北京text'、'北京value')city.add(option,0)//0は、最初のビットに追加することを表します.PS:DOMで規定しています.add()の中で二つのパラメータが必要です.正しくインデックスしていないなら、第二のパラメータはnullを設定すればいいです.つまり、デフォルトで最後のオプションに移動します.ただし、IEで2番目のパラメータはオプションですので、nullを設定すると存在しない位置に入れ、行方不明になります.互換性のためにundefinedを伝達しても互換性があります.city.add(option,null)//IEが表示されませんでしたcity.add(option,undefined)//互換性;
4.削除オプション
// :DOM /remove() null ;
city.removeChild(city.option[0]); // DOM ;
city.remove(0); // remove() , ;
city.options[0] = null; // null ;
// PS: , , , , ;
// , , ;
var city = fm.elements['city']; // ;
var info = fm.elements['info']; // ;
info.appendChild(city.options[0]); // , ;
選択ボックスはindex属性を提供し、現在のオプションのインデックス値を得ることができます.selectedIndexとの違いは、一つは選択ボックスオブジェクトの呼び出し、もう一つはオプションオブジェクトの呼び出しです.
var option1 = city.options[1];
city.insertBefore(option1,city.options[option1.index-1]); // ;
// checked ;
for(var i=0; i
// checked ,
var love = '';
for(var i=0; i