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章表单脚本（学习笔记）
第十四章表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...
【笔记】javascript权威指南-第三章-类型，值和变量
javascript中的原始类型和对象类型(基本类型和引用类型) //本书是指:javascript权威指南 //以下内容摘记时间为:2013.7.27 计算机程序运行时需要对值(value ...
【笔记】javascript权威指南-第六章-对象
对象 //本书是指:javascript权威指南 //以下内容摘记时间为:2013.7.28 对象的定义: 1.对象是一种复合值:将很多值(原始值或者对象)聚合在一起,可以通过名字访问这些值. ...
javascript权威指南第11章 DOM扩展
//javascript 权威指南第三版第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...
JavaScript基础笔记（十）表单脚本
表单脚本一.表单基础知识 JavaScript中表单对应的是HTMLFormElement类型,该类型继承自HTMLElement类型. 通过document.forms可以获得所有表单元素,通过数 ...
javascript权威指南第13章事件示例代码
html 部分 <!DOCTYPE html> <html> <head> <title>Event Bubling Example</title ...
javascript权威指南第21章 Ajax和Comet
function createXHR(){ if(typeof XMLHttpRequest !='undefined'){ return new XMLHttpRequest(); }else if ...
《JavaScript高级程序设计》笔记：表单脚本（十四）
表单的基础知识在HTML中,表单是由<form>元素来表示的,而在JS中,表单对应的是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因而 ...
ANTLR4权威指南 - 第7章通过特定应用程序代码解耦语法
第7章通过特定应用程序代码解耦语法到目前为止,我们已经知道了怎么用ANTLR的语法来定义语言了,接下来我们要给我们的语法注入一些新的元素了.就语法本身而言,其用处并不大,因为它只能告诉我们一个用户 ...

随机推荐

剑指offer28：找出数组中超过一半的数字。
1 题目描述数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出 ...
Python--拦截接口
go 数据渲染到终端 01
package main import ( "fmt" "text/template" "os" ) type Person struct ...
学习RadonDB源码（三）
1. 所谓第四代语言 SQL是一种典型的第四代语言,即4GL,这种语言的突出特点是编写者不需要关注怎么做,只需要告诉系统我要什么就可以. 虽然4GL是这样的一种语言,大大简化了编写者的编写难度,其实底 ...
如何自定义xml文件
在定义文件之前,首先要弄清楚什么是xml文件和dtd文件. 一:什么是xml文件? xml是一种可扩展标记性语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有构造性的标记语言. 二:什么事d ...
手工给程序插入 ShellCode
PE格式是 Windows下最常用的可执行文件格式,理解PE文件格式不仅可以了解操作系统的加载流程,还可以更好的理解操作系统对进程和内存相关的管理知识,而有些技术必须建立在了解PE文件格式的基础上,如 ...
linux 系统运维工具13款
1. 查看进程占用带宽情况 - Nethogs Nethogs 是一个终端下的网络流量监控工具可以直观的显示每个进程占用的带宽. 下载:http://sourceforge.net/projects/ ...
Nginx快速自查手册
本项目是一个 Nginx 极简教程,目的在于帮助新手快速入门 Nginx. demos 目录中的示例模拟了工作中的一些常用实战场景,并且都可以通过脚本一键式启动,让您可以快速看到演示效果. 概述什么 ...
windows下批处理保留指定日期下的文件
@echo offchcp 65001setlocal enabledelayedexpansion ::设置操作路径set "pic_dir=D:\465"echo 开始清理.. ...
Python 简单web服务器的实现
import re import socket def service_cilent(new_socket): request = new_socket.recv(1024).decode(" ...

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

javascript权威指南第14章 表单脚本示例代码的更多相关文章

随机推荐

热门专题

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

javascript权威指南第14章表单脚本示例代码的更多相关文章