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

随机推荐

对比JPA 和Hibernate 和 Mybatis的区别
1.JPA.Hibernate.Mybatis简单了解 1.JPA:本身是一种ORM规范,不是ORM框架.由各大ORM框架提供实现. 2.Hibernate:目前最流行的ORM框架,设计灵巧,文档丰富 ...
利用Anaconda软件安装opencv模块
先说明我安装opencv环境的原因:因为我Anaconda中创建了tensorflow和pytorch虚拟环境,想在每个虚拟环境下都安装opencv模块,这样在后期进行代码调试的时候更加便捷,以下是我 ...
mongodb 启动及创建用户
1. 守护进程启动,参考: https://blog.csdn.net/jj546630576/article/details/81117765 2. 用户管理参考: https://www.cnbl ...
ES6语法基本使用
什么是ES6? ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2. ...
[The 2019 Asia Yinchuan First Round Online Programming] D Take Your Seat
也许更好的阅读体验 $\mathcal{Description}$ 原题链接题目大意该题目有两个问题 $Task\ 1$,有$n$个人$n$个座位,每个人都有一个对应的座位,每个人 ...
[Luogu5319][BJOI2019]奥术神杖(分数规划+AC自动机)
对最终答案取对数,得到$\ln(Ans)=\frac{1}{c}\sum \ln(v_i)$,典型的分数规划问题.二分答案后,对所有咒语串建立AC自动机,然后套路地$f[i][j]$表示走到T的第i个 ...
springboot 使用consul 读取配置文件（遇到的坑太多，没记录）
最终成功版. pom引入mavn依赖:  <dependency> <groupId>org.springframework.cloud& ...
全栈项目|小书架|服务器开发-NodeJS 项目分包
唠嗑参考的是慕课网七月老师的课程,七月的课质量真的挺高的,推荐一波.这次的小书架项目源码不会全部公开,因为用了七月老师课程的绝大部分代码.虽然代码不全,但是只要思路看得懂,代码实现就很简单了. 小书 ...
PAT-1021 Deepest Root (25 分) 并查集判断成环和联通+求树的深度
A graph which is connected and acyclic can be considered a tree. The height of the tree depends on t ...
cf 869c The Intriguing Obsession
题意:有三种三色的岛,用a,b,c来标识这三种岛.然后规定,同种颜色的岛不能相连,而且同种颜色的岛不能和同一个其他颜色的岛相连.问有多少种建桥的方法. 题解:em....dp.我们先看两个岛之间怎么个 ...

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

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

随机推荐

热门专题

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

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