14章

< script >

var form= document. getElementById( "myform");

EventUtil. addHandler( form, "submit", function( event){

var event= EventUtil. getEvent( event); //取得事件对象

EventUtil. preventDefault( event); //阻止这个事件的默认行为就可以取消表单提交（一般来说，当表单数据无效而不能发送给服务器时，

可以使用这一技术）

});

< / script >

只要表单中存在以下任意一种按钮，相应控件拥有焦点的情况下，按回车键就可以提交该表单。如果表单里没有提交按钮，按回车键不会提交表单。

< body >

< input type= "submit" value= "form submit" id= "myform" >

< button type= "submit" id= "myform" >form submit </ button >

</ body >

var form=document.getElementById("myform");

form.submit();  //提交表单，无需表单包含提交按钮

< body >

< input type= "reset" value= "form reset" id= "myform" >

< button type= "reset" id= "myform" >form reset </ button >

</ body >

var form=document.getElementById("myform");

form.reset();  //像单击重置按钮一样触发reset事件

< body >

< form action= "" method= "post" id= "myform" id= "form" >

< ul >

< li >< input type= "radio" name= "color" value= "red" >red </ li >

< li >< input type= "radio" name= "color" value= "yellow" >yellow </ li >

< li >< input type= "radio" name= "color" value= "blue" >blue </ li >

</ ul >

</ form >

</ body >

< script >

var form= document. getElementById( "myform");

var colorfriend= form. elements[ "color"]

alert( colorfriend. length); //3

var firstColorFriend= colorfriend[ 0];

var firstFormFeiend= form. elements[ 0];

alert( firstColorFriend= firstFormFeiend); //true

< / script >

< script >

var form= document. getElementById( "myform");

var field= form. elements[ 0];

field. value= "another value"; //修改value属性

alert( field. form== form); //true 检查form属性的值

field. type= "checkbox" //修改type属性

field. disabled= true; //禁用当前字段

field. focus(); //获得焦点

< / script >

避免多次提交表单

< script >

var form= document. getElementById( "myform");

EventUtil. addHandler( form, "submit", function(event){

var event= EventUtil. getEvent( event);

var btn= target. elements[ "submit-btn"]; //取得提交按钮

btn. disabled= true; //禁用

});

当页面加载完成后，将焦点转移到表单中第一个字段，为此，可以侦听load事件。

< script >

var form= document. getElementById( "myform");

EventUtil. addHandler( window, "load", function(){

document. form[ 0]. element[ 0]. focus();

});

< / script >

< input type= "text" autofocus >

< script >

EventUtil. addHandler( window, "load", function(){

var element= document. form[ 0]. element[ 0];

if( element. autofocus!== true){

element. focus();

console. log( "js focus");

}

});

< / script >

当前字段失去焦点时触发

document. form[ 0]. element[ 0]. blur();

focus时改变北京颜色，表名字段获得了焦点，利用blue恢复文本框背景颜色，利用change事件在用户输入了非数值字符时再次修改背景颜色。 

< script >

var textbox= document. form[ 0]. elements[ 0];

EventUtil. addHandler( textbox, "focus", function(){

var event= EventUtil. getEvent( event);

var target= EventUtil. getTarget( event);

if( target. style. backgroundColor!= "red"){

target. style. backgroundColor= "yellow";

} else{

target. style. backgroundColor= "";

}

});

EventUtil. addHandler( textbox, "blur", function(){

var event= EventUtil. getEvent( event);

var target= EventUtil. getTarget( event);

if( /[^ \d]/. test( target. value)){

target. style. backgroundColor= "red";

} else{

target. style. backgroundColor= "";

}

});

EventUtil. addHandler( textbox, "change", function(){

var event= EventUtil. getEvent( event);

var target= EventUtil. getTarget( event);

if( /[^ \d]/. test( target. value)){

target. style. backgroundColor= "red";

} else{

target. style. backgroundColor= "";

}

});

< / script >

document. getElementById( "name"). oninput = function( e) {

console. log( this. checkValidity())

if( ! this. checkValidity()){

this.value = this.value. substring( 0, this.value.length - 1);

e. preventDefault();

}

}

< body >

< input type= "text" id= "name" pattern= "\d+" >

</ body >

< script >

document. getElementById( "name"). oninput= function( event){

console. log( this. checkValidity());

if(! this. checkValidity()){

this. value. substring( 0, this. value. length- 1);

event. preventDefault();

}

};

< / script >

添加项

< body >

< form action= "http://www.baidu.com" >

< select name= "" id= "selectid" name= "location" >

< option value= "q1" >11 </ option >

< option value= "q2" >22 </ option >

< option value= "q3" >33 </ option >

</ select >

</ form >

</ body >

< script >

var locatio= document. getElementById( "selectid");

var newOption= new Option( "44", "q4");

locatio. add( newOption, undefined);

< / script >

选择选项-单选

< body >

< form action= "http://www.baidu.com" >

< select name= "" id= "selectid" name= "location" >

< option value= "q1" >11 </ option >

< option value= "q2" selected >22 </ option >

< option value= "q3" >33 </ option >

</ select >

</ form >

</ body >

< script >

var locatio= document. getElementById( "selectid");

var selectedIndex= locatio. selectedIndex;

alert( selectedIndex);

var a= locatio. options[ selectedIndex];

alert( a. text);

< / script >

选择选项-单选、多选

< body >

< form action= "http://www.baidu.com" >

< select name= "" id= "selectid" name= "location" >

< option value= "q1" >11 </ option >

< option value= "q2" >22 </ option >

< option value= "q3" >33 </ option >

</ select >

</ form >

</ body >

< script >

var textbox= document. getElementById( "selectid");

function getSelectedOptions( textbox){

var array1= new Array();

var Op= null;

for( var i= 0, len= textbox. options. length; i< len; i++){

Op= textbox. options[ i];

if( Op. selected){

array1. push( Op);

}

}

return array1;

};

var selectedOptions= getSelectedOptions( textbox);

var message= "";

for( var i= 0, len= selectedOptions. length; i< len; i++){

message+= selectedOptions[ i]. index+ selectedOptions[ i]. value+ selectedOptions[ i]. text;

}

alert( message);

< / script >

移除选项

< body >

< form action= "http://www.baidu.com" >

< select name= "" id= "selectid" name= "location" >

< option value= "q1" >11 </ option >

< option value= "q2" >22 </ option >

< option value= "q3" >33 </ option >

</ select >

</ form >

</ body >

< script >

var textbox= document. getElementById( "selectid");

textbox. remove( 0); // 第一种方法：移除第一个选项

textbox. remove( textbox. options[ 0]); //第二种方法：移除第一个选项

//移除所有选项

function clearop( textbox){

for( var i= 0, len= textbox. options. length; i< len; i++){

textbox. remove( 0);

}

}

< / script >