javascript权威指南第14章 表单脚本示例代码

 HTML部分

    
   



    

        

            

                
Red
                
Green
                
Blue
            
            

                

                    
                    
                        
                            one
                            two
                            three
                        
                    
                
            
            

                

                    
                    
                        one
                        two
                        three
                    
                
            
            
            initial value
            
            
            
            
            
            
            
        
        

        
    

    

Form.js

//在HTML中，表单是由
元素来表示的，在javascript中，表单对应的是HTMLFormElement 继承自HTMLElement
//HTMLElement有下列独有的属性和方法。
//acceptCharset 服务器能够处理的字符集，等价于HTML中accept-Charset特性
//action 接收请求的URL，等价于HTML中的action特性
//elements 表单中所有控件的集合（HTMLCollection).
//enctype  请求编码类型，等价于HTML中的enctype特性
//length 表单中的控件数量
//method 要发送HTPP请求类型，通常是GET或POST,等价于HTML中的method特性
//name  表单的名称，等价于HTML的name特性
//submit 提交表单
//target 用于发送请求或者接收响应的窗口名称，等价于HTML的target特性
// document.getElementById("form1") document.forms - document.forms[0]  document.forms["form1"]

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

form.addEventListener('submit', function (event) {

    //避免表单多次提交
    var btn = (event ? event : window.event).target.elements['submit-btn'];
    btn.disabled = true;

    //验证等操作
    var colorFields = form.elements['color'];
    alert(colorFields.length);
    var firstColorFiled = colorFields[0];
    var firstFormFiled = form.elements[0];
    alert(firstColorFiled == firstFormFiled);

    if (event.preventDefault) {
        event.preventDefault();
    }
    else {
        event.returnValue = false;
    }

}, false);

form.addEventListener('reset', function (event) {
    if (event.preventDefault()) {
        event.preventDefault();
    }
    else {
        event.returnValue = false;
    }
}, false);

//form.submit(); 提交表单 form.reset(); 重置表单


//14.1.3 表单字段
var colorFields = form.elements['color'];
// alert(colorFields.length);
var firstColorFiled = colorFields[0];
var firstFormFiled = form.elements[0];
//alert(firstColorFiled == firstFormFiled);

//表单字段共有属性
//disabled boolean 当前字段是否被禁用
//form 只想当前字段所属表单的指针，只读
//name  当前字段的名称
//readOnly boolean 表示改字段是否是只读
//tabIndex 表是当前字段的切换tab 序号
//type 当前字段的类型，如 checkbox radio 等
//value 当前字段将提交给服务器的值

var field = form.elements[0];

field.value = 'Another value';
field.focus();
field.disabled = true;
field.type = 'checkbox';
// alert(form.form ==form);


//14.2.1 选择文本
var textbox = document.forms[0].elements['textbox1'];
// textbox.select();
// textbox.addEventListener('focus',function(event){
//     (event?event:window.event).target.select();
// },false);

//选择事件
// textbox.addEventListener('select',function(event){
//     //alert('Text selected:'+textbox.value);
//     //取得选择的文本
//     alert(textbox.value.substring(textbox.selectionStart,textbox.selectionEnd));
// },false);

//选择部分文本
textbox.value = 'Hello world!';
textbox.focus(); //获得焦点才生效
//textbox.setSelectionRange(0,textbox.value.length);
textbox.setSelectionRange(0, 3); //谷歌浏览器支持
// textbox.setSelectionRange(4,7);

//选择所有文本 IE浏览器支持
// var range = textbox.createTextRange();
// range.collapse(true);
// range.moveStart('character',0);
// range.moveEnd('character',textbox.value.length);
// range.select();


//14.2.2 过滤输入

textbox.addEventListener('keypress', function (event) {

    //var target = event?event.target:window.event.target;
    var charCode = null;
    if (typeof event.charCode == 'number') {
        charCode = event.charCode;
    } else {
        charCode = event.keyCode;
    }
    //非数字阻止继续冒泡执行
    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey) {
        (event ? event : window.event).preventDefault();
    }

}, false);

//阻止复制的内容不合规
textbox.addEventListener('paste', function (event) {
    var text = (event.clipboardData || window.ClipboardData).getData('text');
    if(!/^\d*$/.test(text)){
        (event?event:window.event).preventDefault();
    }
}, false);


//14.2.4 HTML5约束验证API

// 必填字段

var isRequiredSupported = 'required' in document.createElement('input'); //检验浏览器是否支持required属性

//检验字段有效性
if(document.forms[0].checkValidity()){
    //表单有效
}

form.noValidate =true;//禁用验证


// 14.3 选择框脚本

//select 方法
//add(newOption,relOption) 向控件插入新元素，其位置在相关项relOption
//multiple 布尔值 表示是否允许多选项选择
//options 控件中所有元素的HTLCollection
//remove(index) 移除指定位置的项
//selectedIndex 基于0的选中项的索引，如果没有选中项 则值为-1. 对于多选的控件，只保持选中项的第一项索引
//size 选择框中可见的行数


//DOM中每个option的元素都有一个HTMLOptionElement 对象表示，有如下属性
//index 当前选项在options集合中的索引
//label 当前选择项的标签
//selected 布尔值，表示当前项是否被选中
//text 选项的文本
//value 选项的值


//14.3.1 选择选项
var selectbox = document.getElementById("selectbox");
var selectedOption = selectbox.options[selectbox.selectedIndex];
selectbox.options[1].selected =true;

//14.3.2 添加选项
var newOption = document.createElement('option');
newOption.appendChild(document.createTextNode('Option Text'));
newOption.setAttribute('value','Option value');
selectbox.appendChild(newOption);

//14.3.3 移除选项
// selectbox.removeChild(selectbox.options[0]);
//  selectbox.remove(0);
 selectbox.options[0] =null;

 //14.3.4 移动和重排选项
 var selectbox2 = document.getElementById('selectbox2');
 selectbox2.appendChild(selectbox.options[0]); //selectbox.option[0] 添加到第二select的时候会从第一个select 移除

 var optionToMove = selectbox.options[1];
 selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index-1]);


 //14.4 表单序列化


 //14.5 富文本编辑

frames['richedit'].document.designMode ='on';
frames["richedit"].document.execCommand('bold',false,null);
frames['richedit'].document.execCommand('italic',false,null);
frames['richedit'].document.execCommand('createlink',false,'http://www.wrox.com');
frames['richedit'].document.execCommand('formateblock',false,'
');