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

随机推荐

（三）shiro的认证
文章目录认证思路自定义用于登录检验的Realm的思路代码实现后记认证思路调用 SecurityUtils.getSubject() 方法,获取当前的 Subject 对象 : 调用 Sub ...
Ubuntu 18.04 LTS 设置代理（系统代理；http 代理；sock5 代理；apt 代理 ...）
1. 设置系统代理 1.1 设置 http 代理 1.1.1 只在当前 shell 生效 export http_proxy="http://<user>:<passwor ...
hdu 1342.. 复习广搜顺便练习一下一个脑残的格式
In a Lotto I have ever played, one has to select 6 numbers from the set {1,2,...,49}. A popular stra ...
淘宝API总结
1. 淘宝客API https://open.alimama.com/?spm=a219t.11816995.1998910419.d8546b700.2a8f75a5C0NajI#!/documen ...
MVC-07数据库
部分6:添加数据库. 创建数据库 Visual Web Developer带有免费的SQL数据库,名为SQL Server Compact. 数据库创建: 1.右键点击解决方案资源管理器中的App_D ...
Apollo 与 .net core
appsettings配置内容 { "Apollo": { "AppId": "netcore", "Env": &qu ...
java中的权限修饰符&关键字
1.类的权限修饰符default(不写权限修饰符),public 说明:类的权限修饰符只有default(不写权限修饰符)和public. package world default Y N pu ...
MM-自制件改外购件
自制件改外购件 https://wenku.baidu.com/view/fbb182c6bb4cf7ec4afed081.html
IO模型之AIO代码及其实践详解
一.AIO简介 AIO是java中IO模型的一种,作为NIO的改进和增强随JDK1.7版本更新被集成在JDK的nio包中,因此AIO也被称作是NIO2.0.区别于传统的BIO(Blocking IO, ...
二、详解mysql数据类型
一.主要内容 1.介绍mysql中常用的数据类型 2.mysql类型和java类型对应关系 3.数据类型选择的一些建议二.mysql的数据类型主要包括以下五大类整数类型:bit bool t ...

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

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

随机推荐

热门专题

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

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