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

HTML部分

<!DOCTYPE html>
<html>

<head>
    <title></title>
   
</head>

<body>
    <form name="form1" id="form1" >
        <div>
            <ul>
                <li><input type="radio" name="color" value="red" />Red</li>
                <li><input type="radio" name="color" value="green" />Green</li>
                <li><input type="radio" name="color" value="blue" />Blue</li>
            </ul>
            <ul>
                <li>
                    <!-- type='select-one' -->
                    <select name="selectbox" id='selectbox'>
                        <options>
                            <option value="1">one</option>
                            <option value="2">two</option>
                            <option value="3">three</option>
                        </options>
                    </select>
                </li>
            </ul>
            <ul>
                <li>
                    <!-- type='multiple' -->
                    <select multiple id="selectbox2">
                        <option value="1">one</option>
                        <option value="2">two</option>
                        <option value="3">three</option>
                    </select>
                </li>
            </ul>
            <input type="text" pattern="\d+" size='25' maxlength="50" value="initial value" name="textbox1">
            <textarea cols="5" rows="5">initial value</textarea>
            <input type="time">
            <input type="email" />
            <input type="url" />
            <input type="number" />
            <input type="submit" value="Submit Form" name="submit-btn" />
            <input type="reset" value="reset Form" />
            <!-- <button type="button" value="OK">OK</button>
                    <button type="submit" value="OK">Submit Form</button> -->
        </div>
        <div contenteditable id="richedit"  style="height: 300px;"></div>
        <iframe name="richedit" style="height: 100px;" src="blank.htm"></iframe>
    </form>

    <script type="text/javascript" src="form.js" ></script>
</body>

</html>

Form.js

//在HTML中，表单是由<form>元素来表示的，在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

//<input type='text' name='username' required /> 必填字段

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 控件中所有<option>元素的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,'<h1>');

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

猜你喜欢

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