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次,超过数组长度的一半,因此输出 ...
20191031:GIL全局解释锁
20191031:GIL全局解释锁总结关于GIL全局解释锁的个人理解 GIl全局解释锁,本身不是Python语言的特性,而是Python语言底层的c Python解释器的一个特性.在其他解释器中是没 ...
Linux查询命令帮助信息（知道）
方法一 command --help 方法二 man command 操作涉及到的按键: 空格键:显示手册的下一屏 Enter键:一次滚动手册的一行 b:回滚一屏 f:前滚一屏 q:退出结果基本上全 ...
WxWidgets与其他工具包的比较（15种方案）
一些一般注意事项: wxWidgets不仅适用于C ++,而且具有python,perl,php,java,lua,lisp,erlang,eiffel,C#(.NET),BASIC,ruby甚至ja ...
elk 流程图
ELK流程图单纯使用ElK实现分布式日志收集缺点: 1.logstash太多了,扩展不好. 2.读取IO文件,可能会产生日志丢失 3.不是实时性这时候就需要引入 kafka. kafka基于主题模 ...
springboot注册到consul中报错：Spring MVC found on classpath, which is incompatible with Spring Cloud
今天在做springboot整合成springCloud并注册到consul中时,发现若注册到consule中成功则不能启动swagger,且不能提供任何API服务,要是能提供API服务则不能注册到 ...
gulp删除目标文件中所有的console.log()语句——gulp-strip-debug
1.安装npm包 npm install --save-dev gulp-strip-debug 2.使用 const gulp = require('gulp'); const stripDebug ...
for_each使用方法详解
for_each使用方法详解[转] Abstract之前在(原創) 如何使用for_each() algorithm? (C/C++) (STL)曾經討論過for_each(),不過當時功力尚淺, ...
Kafka架构和原理深度剖析
Kafka简介 Kafka是一种分布式的,基于发布/订阅的消息系统.主要设计目标如下: 以时间复杂度为O(1)的方式提供消息持久化能力,并保证即使对TB级以上数据也能保证常数时间的访问性能高吞吐率. ...
Git撤回已经推送(push)至远程仓库提交(commit)的版本
背景所以,经常会遇到已经提交远程仓库,但是又不是我想要的版本,要撤下来. 回退版本一般使用git reset,又分为: # 不删除工作空间改动代码,撤销commit,不撤销git add . git ...

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

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

随机推荐

热门专题

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

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