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的语法来定义语言了,接下来我们要给我们的语法注入一些新的元素了.就语法本身而言,其用处并不大,因为它只能告诉我们一个用户 ...

随机推荐

nginx配置的记录
基本使用语法规则: location [=|~|~*|^~] /uri/ { - } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url ...
第1章：LeetCode--基础部分
LeetCode刷题指导(不能只实现功能就行需要尽量写最优解): 不可能刷遍所有题,只能通过刷题来恢复写代码的功力,熟悉常用算法(暴力算法.冒泡排序/快速排序.strStr KMP算法.二叉树遍历DF ...
字典的学习1——参考Python编程从入门到实践
字典:从汉语词意的角度理解,字典就是一个工具书,可以查找某个字.词.成语等的详细解释,字与解释相对应,而Python中字典则是一些列键和值相对应. Python中,字典放在花括号{键:值}中,eg: ...
Linux or Mac 重启网络
Mac sudo ifconfig en0 down sudo ifconfig en0 up Linux /etc/init.d/networking restart
LOJ3049 [十二省联考2019] 字符串问题【后缀自动机】【倍增】【拓扑排序】
题目分析: 建出后缀自动机,然后把A串用倍增定位到后缀自动机上,再把B串用倍增定位到后缀自动机上. SAM上每个点上的A串根据长度从小到大排序,建点,依次连边. 再对于SAM上面每个点,连到儿子的边, ...
Visual Web Developer 2012安裝教程
1.打开网页链接http://www.w3school.com.cn/aspnet/mvc_intro.asp 点击Visual Web Developer 2012进行安装安装平台(WebPlatf ...
ESlint 格式化代码备忘
vscode 代码格式化配置 vscode 菜单文件->首选项->设置 --->进入扩展查找到ESlint,点击任一选项中的[在setting.json中配置],复制以下代码 { ...
c#基础知识梳理（一）
一.C#简介 C#是微软公司发布的一种面向对象的.运行于.NET Framework之上的高级程序设计语言.C#看起来与Java有着惊人的相似:它包括了诸如单一继承.接口.与Java几乎同样的语法和编 ...
11/8 (tell tales web)
1.visual perception gestalt theory:格式塔学派是心理学重要流派之一,兴起于20世纪初的德国,又称为完形心理学.由马科斯·韦特墨.沃尔夫冈·苛勒和科特·考夫卡三位德国心 ...
多个div并排不换行
1.所有div的父元素不换行 white-space: nowrap; 2.所有div设置为行内元素 display: inline-block; 基于java记账管理系统[尚学堂·百战程序员]

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

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

随机推荐

热门专题

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

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