《javascript高级程序设计》笔记(十四)

表单脚本

(一)表单的基础知识

1.提交表单

使用<input>或<button>将其type特性设置为submit后便可定义提交按钮,图片按钮通过将<input>的type特性值设置为"image"来定义。

使用preventDefault()方法阻止表单提交。一般在表单数据无效而不能发送给服务器时可以这么做。

//取得事件对象
event = EventUtil.getEvent(event);

//阻止默认事件
EventUtil.preventDefault(event);

以编程方式也可以提交表单,不会触发submit事件,因此提交前要验证表单数据。

重复提交表单:在第一次提交表单后就禁用提交按钮,或者利用onsubmit事件处理程序取消后续的表单提交操作。

2.重置表单

用户点击重置按钮时,会触发reset事件,我们可以在必要时取消重置操作。调用reset()方法回想单击重置按钮一样触发reset事件。

3.表单字段

每个表单都有elements属性,该属性是表单中所有表单元素的集合,可以按照位置和name特性来访问它们。

如果多个表单控件使用一个name,会返回该name的第一个NodeList。

①共有的表单字段属性

除了<fieldset>所有表单字段都有共同的一组属性。

能动态修改表单字段,意味着我们能在任何时候以任何方式动态操作表单。

               //避免多次提及表单
               EventUtil.addHandler(form, "submit", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);

                //取得提交按钮
                var btn = target.elements["submit-btn"];

                //禁用它
                btn.disabled = true;

不能用onclick事件处理程序实现因为有得浏览器会在触发表单的submit事件之前先触发click事件。

②共有的表单字段方法

每个表单字段都有两个方法:focus()和blur()。

focus方法用于将浏览器焦点设置到表单字段,使其可以响应键盘事件。

HTML5为表单字段新增了autofocus属性,把焦点移动到响应的字段。在支持的浏览器值为true。

<input type="text" autofocus>

Firefox4+、Safari5+、Chrome和Opera。

blur()是从元素移走焦点,不会把焦点转移到某个特定的元素上。

③公有的表单字段事件

除了支持鼠标、键盘、更改和HTML事件外,所有表单字段都支持者3个事件。

blur:子弹失去焦点时触发。

change:对<input>和<textarea>元素,在它们失去焦点且value值改变;对<select>元素,在其选项改变时触发。

focus:当前字段获得焦点。

可以使用focus事件修改文本框的背景颜色,以便更清楚表明字段获得焦点,可以利用blur事件恢复背景颜色,利用change事件在用户输入非数值字符时再次修改背景颜色。

(二)文本框脚本

文本框:一种是使用<input>元素的单行文本框,另一种是使用<textarea>的多行文本框。

文本框要将<input>元素的type特性设置为"text",size特性指定文本框能显示的字符数,value设置初始值,maxlength指定可接受最大字符数。

多行文本框用rows好cols分别指定行数和列数,<textarea>的初始值要放在<textarea>和</textarea>之间,且不能在HTML中给<textarea>指定最大字符数。

它们都会将用户输入的内容保存到value属性。

1.选择文本

select()方法用于选择文本框中所有文本,特别是文本框包含默认值时用户不用删除文本。

 

①选择事件

在IE9+、Opera、Firefox、Chrome和Safari中,只有用户选择了文本(而且释放鼠标),才会触发select事件在IE8及更早版本,只要用户选择一个字母(不必释放鼠标)就会触发。在调用select方法时也会触发select事件。

②取得选择的文本

添加属性selectionStart和selectionEnd可以获取选择的文本。这两个属性保存的是基于0的数值,表示所选择文本的范围。

textbox.value.substring(textbox.selectionStart,  textbox.selectionEnd)

因为subString()方法基于字符串的偏移量操作,所以将selectionStart和selectionEnd直接传给它。

IE8及之前版本不支持这两个属性,它们有document.selection对象,保存着用户在整个文档选择的文本信息。与select事件一起用,并要创建一个范围再将文本提取出来。

document.selection.createRange().text;

③选择部分文本

setSelectionRange()方法,接收两个参数:要选择的第一个字符索引和最后一个字符之后的字符的索引。

要看到选择的文本,必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。

IE9、Firefox、Safari、Chrome和Opera支持。

IE8及之前版本支持使用范围选择部分文本。先使用createTextRange()方法创建一个范围,将其放在恰当的位置。再使用collapse()将范围折叠到文本框的开始位置,调用moveStart()和moveEnd()将范围移动到位。最后使用范围的select()范围选择文本。

2.过滤输入

①屏蔽字符

通过阻止事件的默认行为来屏蔽所有按键

EventUtil.addHandler(textbox, "keypress", function(event){
                event = EventUtil.getEvent(event);
                EventUtil.preventDefault(event);
            });

屏蔽特定字符:

 EventUtil.addHandler(textbox, "keypress", function(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);
                var charCode = EventUtil.getCharCode(event);                                          //跨浏览器取得字符编码
                if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){     //fromCharCode将字符编码转换为字符串 !event.ctrlKey:没有按下Ctrl键
                    EventUtil.preventDefault(event);
                }

            });

②操作剪贴板

beforecopy      copy     beforecut      cut      beforepaste      paste

要访问剪贴板的数据可以使用clipbordData对象:在IE这是window对象的属性,在Firefox 4+、Safari、Chrome里是相应event的属性。在Firefox、Safari和Chrome只有在处理剪贴板事件期间clipboardData对象才有效,在IE里可以随时访问clipboardData对象。

clipboardData对象有3个方法:getData()、setData()、clearData()。

getData()接收一个参数,即要取得的数据格式。IE有"text"和"URL",Firefox、Safari和Chrome里是MIME类型,但可以用"text"代表"text/plain"。

setData()第一个参数也是数据类型,Safari和Chrome只支持MIME类型,第二个参数是要放到剪贴板的文本。Safari和Chrome的setData()方法不能识别"text"类型,在成功放入脚本后返回true。

                if (!/^\d*$/.test(text)){
                    EventUtil.preventDefault(event);
                }

并非所有浏览器支持访问剪贴板,更简单的做法是屏蔽一或多个剪贴板操作,在Opera需要阻止会触发这些事件的按键,还要阻止文本框显示上下文菜单。

3.自动切换焦点

            function tabForward(event){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);

                if (target.value.length == target.maxLength){
                    var form = target.form;

                    for (var i=0, len=form.elements.length; i < len; i++) {
                        if (form.elements[i] == target) {
                            if (form.elements[i+1]){
                                form.elements[i+1].focus();
                            }
                            return;
                        }
                    }
                }
            }

比较用户输入的值与文本框的maxlength特性,确定是否达到最大长度。如果相等则需要查找表单字段集合,直到找到下一个文本框。找到后将焦点切换到文本框。然后把这个函数指定为每个文本框的onkeyup事件处理程序。

4.HTML5约束验证API

HTML5新增了一些功能,即使javascript被禁用或没能加载也能确保基本的验证。Firefox 4+、Safari 5+、Chrome和Opera 10+支持。

①必填字段

第一种情况是在表单字段指定required属性

<input type="text" name="username" required>

适用于<input> <textarea> 和 <select>字段。

②其他输入类型

email和url属性

<input type = "email" name = "email">
<input type = "url" name = "homepage">

"email"属性要求输入的文本要符合电子邮件地址的模式,"url"要求输入的文本符合URL模式。但匹配模式存在问题。如果不给<input>元素设置required属性,空文本框也会通过验证。

③数据范围

"number" "range" "datetime" "tatetime-local" "date" "month" "week" "time",但浏览器支持不哈。

对所有这些数值类型的输入元素,可以指定min属性、max属性,和step属性。

stepUp()和stepDown(),接收一个可选参数:要在当前值基础加上或减去的数。

④输入模式

HTML5为文本增加了pattern属性,值是一个正则表达式,用于匹配文本框中的值。

//只允许输入数字
<input type="text" pattern="\d+" name="count">

指定pattern不能阻止用户输入无效的文本。

⑤检测有效性

checkValidity()方法可以检测表单中某个字段是否有效,如果字段有效返回true。字段值是否有效是根据前面的约束。要检测整个表单是否有效,可以在表单自身调用这个方法。

validity属性包含一系列属性,每个属性返回一个布尔值,说明该值是否符合约束。

⑥禁用验证

设置novalidate属性,表单不进行验证。

如果一个表单有多个提交按钮,为了指定点击某个提交按钮不验证表单,可以在相应的按钮上添加formnovalidate属性。

(三)选择框脚本

通过<select>和<option>创建。

HTMLSelectElement类型:

add(newOption,relOption):向插件插入新<option>元素,位置在relOption之前。

multiple:布尔值,是否允许多项选择。

options:所有<option>元素的HTMLCollection。

remove(index):移除指定位置的选项。

selectedIndex:基于0的选中项的索引。没有选中项值为-1。多项选择值保持选中项的第一项。

size:选择框中可见的行数。

选项框的value属性:

没有选中:空字符串。

有一个选中,而且value特性在HTML指定:等于value特性,即使value为空字符串。

有一个选中,value特性在HTML未指定:等于该项的文本。

有多个选中项:根据前两条规则取得第一个选中项的值。

HTMLOptionElement类型

index:当前选中在option的索引。

label:当前选项的标签。

selected:当前选项是否被选中、

text:选项的文本。

value:选项的值。

var selectbox = document.forms[0].elements["location"];

//推荐
var text = selectbox.option[0].text;      //选项的文本
var text = selectbox.option[0].value;    //选项的值

在未指定value特性时,IE会返回空字符串,IE9+、Safari、Firefox、Chrome和Opera返回与text特性相同的值。

1.选择选项

selectedIndex属性  访问选中项

var selectedOption = selectbox.option[selectbox.selectedIndex];

对选择多项的选择框,selectedIndex属性会取消以前的所有选项并选择指定的那一项。

另一种选择选项的方式——取得对某一项的引用,将其selected属性设置为true。在允许多项选择框设置不会取消对其他选项的选择。但在单选选择框中会取消。将selected设为false对单选选择框没有影响。

2.添加选项

方法一:DOM

创建<option>元素,为它添加文本节点,并设置器value特性,最后将它添加到选择框。

                var newOption = document.createElement("option");
                newOption.appendChild(document.createTextNode(textTextbox.value));
                newOption.setAttribute("value", valueTextbox.value);

                selectbox.appendChild(newOption);

方法二:option构造函数

接收两个参数text、value(可选)

var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption);    //在IE8及之前版本有bug

方法三:选择框的add()方法

接收两个参数:要添加的新选项和将位于新选项之后的选项,第二个参数传入undefined可以在所有浏览器将新选项插入到列表最后。

var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined);

3.移除选项

方法一:DOM的removeChild()方法

selectbox.removeChild(selectbox.option[0]);

方法二:选择框的remove()方法,接收一个参数:要移除选项的索引

selectbox.remove(0);

方法三:将相应选项设为null

selectbox.option[0] = null;

移除一个选项后后续选项会自动向上移一个位置。

4.移动和重排选项

将一个选项框的选项移动到另一个选项框——使用DOM的appendChild方法

 selectbox2.appendChild(selectbox1.options[parseInt(textbox.value, 10)]);

将某一项移动到特定位置,最合适的DOM方法是insertBefore()

//在选项框中向前移动一个选项的位置
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);   //向后是Index+2

(四)表单序列化

利用type属性,连同name和value属性一起实现表单序列化。

(五)富文本编辑

本质是在页面嵌入一个包含空HTML页面的iframe。通过设置designMode属性,这个空白的HTML页面可以被编辑,编辑对象是该页面<body>元素的HTML代码。designMode属性值为on时,整个文档可编辑。

只有在页面加载完才能设置designMode属性,因此要用到onload事件。

1.使用contenteditable属性

可以把ontenteditable属性应用给页面上任何元素,用户便可以编辑该元素。有true、false、inherit三个可能的值。

IE、Firefox、Chrome、Safari和Opera

2.操作富文本

与富文本编辑器交互的主要方式是使用document.execCommand()。这个方法对文档执行预定义的命令,可以传递三个参数:要执行的命令名称,表示浏览器是否应该为当前命令提供用户界面的一个布尔值和执行命令必须的一个值(不需要则传递null)。为保持浏览器兼容性第二个参数设置为false。

与剪贴板相关的命令在不同浏览器差异很大。

这些命令产生的HTML在不同浏览器有很大不同。

queryCommandEnabled():检测是否可以针对当前选中的文本或者当前插入字符所在位置执行某个命令,接收一个参数即要检测的命令,如果允许执行这个命令则返回true。

queryCommandState():确定是否已将制定命令应用到了选中的文本。

queryCommandValue():取得执行命令时传入的值。

3.富文本选区

使用frame的getSelection()方法可以确定实际选择的文本。调用它会返回一个表示当前选择文本的Selection对象。

使用默认选区中的DOM范围,通过surroundContents()方法将选区添加到带有黄色背景的<span>元素。

                            var selection = frames["richedit"].getSelection();

                            //取得代表选区的范围
                            var range = selection.getRangeAt(0);

                            //突出显示选择的文本
                            var span = frames["richedit"].document.createElement("span");
                            span.style.backgroundColor = "yellow";
                            range.surroundContents(span);

IE9、Firefox、Safari、Chrome、Opera 8都实现了它,IE8及之前版本可以通过selection对象操作选择的文本。

4.表单与富文本

富文本编辑器的HTML不会被自动提交给服务器,需要我们手工来提取并提交HTML。通常可以添加一个隐藏的表单字段,让它的值等于从iframe中提取出的HTML。

            EventUtil.addHandler(document.forms[0], "submit", function(){
                event = EventUtil.getEvent(event);
                var target = EventUtil.getTarget(event);

                target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
            });

通过文档主体的innerHTML属性取得iframe的HTML,将其插入到"comments"的表单字段。如果想在代码中通过submit()手工提交表单必须这样做。

时间: 2024-11-06 10:35:32

《javascript高级程序设计》笔记(十四)的相关文章

javascript高级程序设计 第十四章--表单脚本

javascript高级程序设计 第十四章--表单脚本 在HTML中表单由<form>元素表示,在js中表单对应的是HTMLFormElement类型,这个类型也有很多属性和方法:取得表单元素的引用还是为它添加id特性,用DOM操作来获取表单元素:提交表单:把<input>或<button>元素的type特性设置为"submit",图像按钮把<input>元素的type特性设置为"image",也可以调用submit(

javascript高级程序设计——笔记

javascript高级程序设计--笔记 基本概念 基本数据类型包括Undefined/Null/Boolean/Number和String 无须指定函数的返回值,实际上,未指定返回值的函数返回的是一个特殊的undefined值 变量.作用域和内存问题 基本类型值在内存中占据固定大小的空间,因此保存在栈内存中 引用类型的值是对象,保存在堆内存中 确定一个值是哪种基本类型用typeof,确定一个值是哪种引用用instanceof 所有变量都存在于一个执行环境当中,这个执行环境决定了变量的生命周期,

javascript高级程序设计笔记1

最近在看javascript高级程序设计,看之前觉得自己的js学得还不错,然后,看了没几页就觉得自己好像没有学过一样,这主要写写我以前不完全了解的一些知识. 首先是关于基本数据类型的,从Number开始,以前经常用parseInt来转换数值,看过书才知道,这个函数的本意是专门用于把字符串转换成数值,而且以前也不知道它具体是怎么一个转换规则.先来看看Number()函数的转换规则: 1.如果是Boolean 值,true 和false 将分别被转换为1 和0.2.如果是数字值,只是简单的传入和返回

javascript高级程序设计笔记(第5章 引用类型)

1.Object类型 两种方式定义:对象字面量.new 两种方式访问:括号.点 2.Array类型 2.1  定义方式:new Array.数组字面量 2.2  lenght属性:可以利用它方便的想数组末尾添加元素 2.3  检测数组 instanceof isArray()方法  2.4  toString().soLocaleString().valueOf().join()方法 2.5.栈方法   push()方法:逐个添加到数组末尾,并返回修改后的数组长度 pop()方法:返回数组的最后

【javascript高级程序设计笔记】第六章OOP

忙了一段时间,加了将近一个月的班. 书也落下没看,上次看到第七章(这部分笔记大概还是9月份的吧),偶尔看到很吃力.看的速度慢下来. 学习就是一个慢慢积累慢慢沉淀的过程.看书时没有明显觉得提升.但在看完书后近段时间工作中写代码,明显感觉效率还是有提升,基础知识牢固了. 这本书是第二次看,这次很认真的遍读和做笔记,笔记的文字均是自己边看边敲的,这样才更好的真正的吸收到一部分吧! 这些天在看web响应式设计:HTML5和CSS3实战 第6章 面向对像的程序设计 6.1.1属性类型 ECMAScript

【javascript高级程序设计笔记】第一章与第三章

第1章 javascript简介 1.2Javascript实现 一个完整的javascript实现由下列三个不同的部分组成 核心(ECMAScript) 提供核心语言功能 文档对象模型(DOM) 提供访问和操作网页内容的方法和接口 浏览器对象模型(BOM)提供与浏览器交互的方法和接口 ECMAScript 它规定了这门语言的下列组成部分: 语法  类型  语句  关键字 保留字 操作符 对象 ECMA-262第5版,发布于2009年. 文档对象模型(DOM) Document Object M

JavaScript高级程序设计笔记之面向对象

说起面向对象,大部分程序员首先会想到 类 .通过类可以创建许多具有共同属性以及方法的实例或者说对象.但是JavaScript并没有类的概念,而且在JavaScript中几乎一切皆对象,问题来了,JavaScript中如何面向对象? JavaScript中将对象定义为:一组无序的 键值对的集合,属性以及方法的名称就是键,键的值可以是任何类型(字符串,数字,函数--) 在JavaScript中,所有对象继承自Object,所有对象继承自Object,所有对象继承自Object! 创建 1  简单创建

JavaScript高级程序设计:第四章

变量.作用域和内存问题 1.ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,引用类型值指的是有多个值构成的对象. 2.动态的属性:定义一个基本类型值和引用类型值的方法是类似的:创建一个变量并为该变量赋值.但是,当这个值保存到变量中以后,对不同类型值可以执行的操作大相庭径.对于引用类型的值,我们可以为其添加属性和方法,也可以改变和删除其属性和方法.如下例子: var  person = new Object(): person.name

javascript高级程序设计笔记(第7章 函数表达式)

7.5 小结 在JavaScript 编程中,函数表达式是一种非常有用的技术.使用函数表达式可以无须对函数命名,从而实现动态编程.匿名函数,也称为拉姆达函数,是一种使用JavaScript 函数的强大方式.以下总结了函数表达式的特点.? 函数表达式不同于函数声明.函数声明要求有名字,但函数表达式不需要.没有名字的函数表达式也叫做匿名函数.? 在无法确定如何引用函数的情况下,递归函数就会变得比较复杂:? 递归函数应该始终使用arguments.callee 来递归地调用自身,不要使用函数名——函数

Javascript高级程序设计笔记(很重要尤其是对象的设计模式与继承)

var obj = {'a':'a'}; var fun = function (){} console.log(typeof obj);//object console.log(typeof fun);//function var a; console.log(a === undefined);//true console.log(typeof b);//true 未声明的变量使用会报错,但是他的typeof=undefined var c=null; console.log(typeof c