Web

表单的变化不是很大。

由于不能直接使用表单解决问题#xff0c;因此开发者不得不使用JavaScript

既做表单验证#xf…十九、表单脚本

表单的变化不是很大。

由于不能直接使用表单解决问题因此开发者不得不使用JavaScript

表单基础

HTMLCollection。

enctype请求的编码类型等价于

HTML

属性。

reset()把表单字段重置为各自的默认值。

submit()提交表单。

target用于发送请求和接收响应的窗口的名字等价于

HTML

有几种方式可以取得对form元素的引用。

最常用的是将表单当作普通元素为它指定一个

form

document.getElementById(form1);此外使用

document.forms

集合可以获取页面上所有的表单元素。

然后可以进一步使用数字索引或表单的名字name来访问特定的表单。

比如//

let

document.forms[form2];较早的浏览器或者严格向后兼容的浏览器也会把每个表单的

name

来访问。

不推荐使用这种方法因为容易出错而且这些属性将来可能会被浏览器删除。

注意表单可以同时拥有

提交表单

表单是通过用户点击提交按钮或图片按钮的方式提交的。

提交按钮可以使用

type

属性为submit的input或button元素来定义图片按钮可以使用

type

属性为image的input元素来定义。

点击下面例子中定义的所有按钮都可以提交它们所在的表单!--

input

srcgraphic.gif如果表单中有上述任何一个按钮且焦点在表单中某个控件上则按回车键也可以提交表单。

textarea

控件是个例外当焦点在它上面时按回车键会换行。

注意没有提交按钮的表单在按回车键时不会提交。

以这种方式提交表单会在向服务器发送请求之前触发

submit

事件。

这样就提供了一个验证表单数据的机会可以根据验证结果决定是否真的要提交。

阻止这个事件的默认行为可以取消提交表单。

例如下面的代码会阻止表单提交let

form

document.getElementById(myForm);

(event)

preventDefault()方法可以阻止表单提交。

通常在表单数据无效以及不应该发送到服务器时可以这样处理。

当然也可以通过编程方式在

JavaScript

submit()方法来提交表单。

可以在任何时候调用这个方法来提交表单而且表单中不存在提交按钮也不影响表单提交。

下面是一个例子let

form

document.getElementById(myForm);

提交表单

事件不会触发。

因此在调用这个方法前要先做数据验证。

表单提交的一个最大的问题是可能会提交两次表单。

如果提交表单之后没有什么反应那么没有耐心的用户可能会多次点击提交按钮。

结果是很烦人的因为服务器要处理重复的请求甚至可能造成损失如果用户正在购物则可能会多次下单。

解决这个问题主要有两种方式在表单提交后禁用提交按钮或者通过

onsubmit

属性为reset的input或button元素来创建比如!--

input

Form/button这两种按钮都可以重置表单。

表单重置后所有表单字段都会重置回页面第一次渲染时各自拥有的值。

如果字段原来是空的就会变成空的如果字段有默认值则恢复为默认值。

用户单击重置按钮重置表单会触发

reset

事件。

这个事件为取消重置提供了机会。

例如以下代码演示了如何阻止重置表单let

form

document.getElementById(myForm);

(event)

document.getElementById(myForm);

重置表单

事件。

注意表单设计中通常不提倡重置表单因为重置表单经常会导致用户迷失方向如果意外触发则会令人感到厌烦。

实践中几乎没有重置表单的需求。

一般来说提供一个取消按钮让用户点击返回前一个页面而不是恢复表单中所有的值来得更直观。

表单字段

集合是一个有序列表包含对表单中所有字段的引用包括所有input、textarea、button、select和fieldset元素。

elements集合中的每个字段都以它们在

HTML

document.getElementById(form1);

let

form.elements.length;如果多个表单控件使用了同一个

name比如像单选按钮那样则会返回包含所有同名元素的HTMLCollection。

比如来看下面的

HTML

是color这个名字把它们联系在了一起。

在访问elements[“color”]时返回的

NodeList

document.getElementById(myForm);

let

console.log(colorFields.length);

let

form.elements[“color”]中包含的第一个元素。

注意也可以通过表单属性的方式访问表单字段比如

form[0]这种使用索引和

form[“color”]这种使用字段名字的方式。

访问这些属性与访问

form.elements

集合是一样的。

这种方式是为向后兼容旧版本浏览器而提供的实际开发中应该使用

除fieldset元素以外所有表单字段都有一组同样的属性。

由于input类型可以表示多种表单字段因此某些属性只适用于特定类型的字段。

除此之外的属性可以在任何表单字段上使用。

以下列出了这些表单字段的公共属性和方法。

disabled布尔值表示表单字段是否禁用。

form指针指向表单字段所属的表单。

这个属性是只读的。

name字符串这个字段的名字。

readOnly布尔值表示这个字段是否只读。

tabIndex数值表示这个字段在按

Tab

键时的切换顺序。

type字符串表示字段类型如checkbox、radio等。

value要提交给服务器的字段值。

对文件输入字段来说这个属性是只读的仅包含计算机上某个文件的路径。

form

document.getElementById(myForm);

let

checkbox;这种动态修改表单字段属性的能力为任何时候以任何方式修改表单提供了方便。

举个例子Web

表单的一个常见问题是用户常常会点击两次提交按钮。

在涉及信用卡扣款的情况下这是个严重的问题可能会导致重复扣款。

对此常见的解决方案是第一次点击之后禁用提交按钮。

可以通过监听

let

document.getElementById(myForm);

(event)

true。

注意这个功能不能通过直接给提交按钮添加onclick

事件处理程序来实现原因是不同浏览器触发事件的时机不一样。

有些浏览器会在触发表单的

submit

事件的浏览器这个按钮会在表单提交前被禁用这意味着表单就不会被提交了。

因此最好使用表单的

submit

事件来禁用提交按钮。

但这种方式不适用于没有使用提交按钮的表单提交。

如前所述只有提交按钮才能触发

submit

属性可以用于除fieldset之外的任何表单字段。

对于input元素这个值等于

type

HTML类型的值单选列表select.../select“select-one”多选列表select

multiple.../select“select-multiple”自定义按钮button.../button“submit”自定义非提交按钮button

typebutton.../button“button”自定义重置按钮button

typereset.../button“reset”自定义提交按钮button

type

blur()。

focus()方法把浏览器焦点设置到表单字段这意味着该字段会变成活动字段并可以响应键盘事件。

例如文本框在获得焦点时会在内部显示闪烁的光标表示可以接收输入。

focus()方法主要用来引起用户对页面中某个部分的注意。

比如在页面加载后把焦点定位到表单中第一个字段就是很常见的做法。

实现方法是监听

load

focus()如下所示window.addEventListener(load,

(event)

document.forms[0].elements[0].focus();

type

focus()window.addEventListener(load,

(event)

及以下版本不支持。

注意默认情况下只能给表单元素设置焦点。

不过通过将

tabIndex

blur()时焦点不会转移到任何特定元素仅仅只是从调用这个方法的元素上移除了。

在浏览器支持

readonly

blur()不过如果需要是可以用的。

下面是一个例子document.forms[0].elements[0].blur();表单字段的公共事件

HTML

blur在字段失去焦点时触发。

change在input和textarea元素的

value

发生变化且失去焦点时触发或者在select元素中选中项发生变化时触发。

focus在字段获得焦点时触发。

blur

focus()方法而触发。

这两个事件对所有表单都会一视同仁。

change

事件则不然它会因控件不同而在不同时机触发。

对于input和textarea元素change

事件会在字段失去焦点同时

自控件获得焦点后发生变化时触发。

对于select元素change

blur

事件通常用于以某种方式改变用户界面以提供可见的提示或额外功能例如在文本框下面显示下拉菜单。

change

事件通常用于验证用户在字段中输入的内容。

比如有的文本框可能只限于接收数值。

focus

事件可以用来改变控件的背景颜色以便更清楚地表明当前字段获得了焦点。

blur

change

事件可以用于在用户输入了非数值时把背景改为红色。

以下代码展示了上述操作let

textbox

textbox.addEventListener(focus,

(event)

textbox.addEventListener(change,

(event)

事件处理程序会把文本框的背景改为黄色更清楚地表明它是当前活动字段。

onblur

onchange

事件处理程序会在发现非数值字符时把背景改为红色。

为测试非数值字符这里使用了一个简单的正则表达式来检测文本框的

onblur

事件处理程序上实现以确保无论文本框是否改变都能执行验证。

注意blur

change

事件触发在其他浏览器中触发顺序则相反。

因此不能依赖这两个事件触发的顺序必须区分时要多加注意。

文本框编程

中有两种表示文本框的方式单行使用input元素多行使用textarea元素。

这两个控件非常相似大多数时候行为也一样。

不过它们也有非常重要的区别。

默认情况下input元素显示为文本框省略

type

属性。

与input不同的是textarea的初始值必须包含在textarea和/textarea之间如下所示textarea

rows25

value/textarea同样与input元素不同的是textarea不能在

HTML

中指定最大允许的字符数。

除了标记中的不同这两种类型的文本框都会在

value

属性中保存自己的内容。

通过这个属性可以读取也可以设置文本模式的值如下所示let

textbox

document.forms[0].elements[textbox1];

textbox.value

select()的方法此方法用于全部选中文本框中的文本。

大多数浏览器会在调用

例外。

这个方法不接收参数可以在任何时候调用。

下面来看一个例子let

textbox

document.forms[0].elements[textbox1];

textbox.select();在文本框获得焦点时选中所有文本是非常常见的特别是在文本框有默认值的情况下。

这样做的出发点是让用户能够一次性删除所有默认内容。

可以通过以下代码来实现textbox.addEventListener(focus,

(event)

});把以上代码应用到文本框之后只要文本框一获得焦点就会自动选中其中的所有文本。

这样可以极大提升表单易用性。

select

及更早版本中则会在第一个字符被选中时触发。

另外调用select()方法也会触发

select

document.forms[0].elements[textbox1];

textbox.addEventListener(select,

(event)

事件能够表明有文本被选中但不能提供选中了哪些文本的信息。

HTML5对此进行了扩展以方便更好地获取选中的文本。

扩展为文本框添加了两个属性selectionStart

的数值分别表示文本选区的起点和终点文本选区起点的偏移量和文本选区终点的偏移量。

因此要取得文本框中选中的文本可以使用以下代码function

return

textbox.value.substring(textbox.selectionStart,

}因为

事件一起使用时可以确定是触发这个事件文本框中选中的文本。

为取得这些选中的文本必须先创建一个范围然后再从中提取文本如下所示function

(typeof

textbox.value.substring(textbox.selectionStart,

else

document.selection.createRange().text;

document.selection

setSelectionRange()方法也可以在所有文本框中使用。

这个方法接收两个参数要选择的第一个字符的索引和停止选择的字符的索引与字符串的

substring()方法一样。

下面是几个例子textbox.value

Hello

setSelectionRange()之前或之后给文本框设置焦点。

这个方法在

Opera

及更早版本支持通过范围部分选中文本。

这也就是说要选择文本框中的部分文本必须先使用

moveStart()和

moveEnd()范围方法把这个范围放到正确的位置上。

不过在调用这两个方法前需要先调用

collapse()方法把范围折叠到文本框的开始。

接着moveStart()可以把范围的起点和终点都移动到相同的位置再给moveEnd()传入要选择的字符总数作为参数。

最后一步是使用范围的

select()方法选中文本如下面的例子所示textbox.value

Hello

w与其他浏览器一样如果想要看到选中的效果则必须让文本框获得焦点。

部分选中文本对自动完成建议项等高级文本输入框是很有用的。

不同文本框经常需要保证输入特定类型或格式的数据。

或许数据需要包含特定字符或必须匹配某个特定模式。

由于文本框默认并未提供什么验证功能因此必须通过

JavaScript

能力可以把常规的文本框转换为能够理解自己所收集数据的智能输入框。

屏蔽字符

有些输入框需要出现或不出现特定字符。

例如让用户输入手机号的文本框就不应该出现非数字字符。

我们知道

keypress

事件负责向文本框插入字符因此可以通过阻止这个事件的默认行为来屏蔽非数字字符。

比如下面的代码会屏蔽所有按键的输入textbox.addEventListener(keypress,

(event)

});运行以上代码会让文本框变成只读因为所有按键都被屏蔽了。

如果想只屏蔽特定字符则需要检查事件的

charCode

属性以确定正确的回应方式。

例如下面就是只允许输入数字的代码textbox.addEventListener(keypress,

(event)

(!/\d/.test(String.fromCharCode(event.charCode))){

});这个例子先用String.fromCharCode()把事件的charCode

转换为字符串再用正则表达式/\d/来测试。

这个正则表达式匹配所有数字字符如果测试失败就调用

preventDefault()屏蔽事件默认行为。

这样就可以让文本框忽略非数字输入。

虽然

keypress

事件应该只在按下字符键时才触发但某些浏览器会在按下其他键时也触发这个事件。

Firefox

Safari3.1

事件。

这意味着简单地屏蔽所有非数字字符还不够好因为这样也屏蔽了上述这些非常有用的且必要的键。

好在我们可以轻松检测到是否按下了这些键。

在Firefox

中所有触发

的键。

为此上面的函数可以改进为textbox.addEventListener(keypress,

(event)

(!/\d/.test(String.fromCharCode(event.charCode))

event.charCode

});这个事件处理程序可以在所有浏览器中使用屏蔽非数字字符但允许同样会触发

keypress

Ctrl键如下面的例子所示textbox.addEventListener(keypress,

(event)

(!/\d/.test(String.fromCharCode(event.charCode))

event.charCode

});最后这个改动可以确保所有默认的文本框行为不受影响。

这个技术可以用来自定义是否允许在文本框中输入某些字符。

处理剪贴板

beforecopy复制操作发生前触发。

copy复制操作发生时触发。

beforecut剪切操作发生前触发。

cut剪切操作发生时触发。

beforepaste粘贴操作发生前触发。

paste粘贴操作发生时触发。

这是一个比较新的控制剪贴板访问的标准事件的行为及相关对象会因浏览器而异。

在

Safari、Chrome

事件之前触发。

无论是在上下文菜单中做出选择还是使用键盘快捷键copy、cut

paste

事件可以在向剪贴板发送或从中检索数据前修改数据。

不过取消这些事件并不会取消剪贴板操作。

要阻止实际的剪贴板操作必须取消

copy、cut和

对象。

为了跨浏览器兼容最好只在剪贴板事件期间使用这个对象。

clipboardData

对象上有

getData()方法从剪贴板检索字符串数据并接收一个参数该参数是要检索的数据的格式。

IE

为此规定了两个选项“text和URL”。

Firefox、Safari

Chrome

类型不过会将text视为等价于text/plain。

setData()方法也类似其第一个参数用于指定数据类型第二个参数是要放到剪贴板上的文本。

同样IE

支持text和URLSafari

setData()才有效其他浏览器会忽略对这个方法的调用。

为抹平差异可以使用以下跨浏览器的方法function

var

event.clipboardData.setData(text/plain,

value);

window.clipboardData.setData(text,

value);

getData()。

相应的setClipboardText()函数则要复杂一些。

在确定clipboardData

对象的位置之后需要根据实现以相应的类型Firefox、Safari

Chrome

setData()。

如果文本框期待某些字符或某种格式的文本那么从剪贴板中读取文本是有帮助的。

比如如果文本框只允许输入数字那么就必须检查粘贴过来的值确保其中只包含数字。

在

paste

事件中可以确定剪贴板上的文本是否无效如果无效就取消默认行为如下面的例子所示textbox.addEventListener(paste,

(event)

事件处理程序确保只有数字才能粘贴到文本框中。

如果剪贴板中的值不符合指定模式则取消粘贴操作。

Firefox、Safari

Chrome

getData()方法。

因为不是所有浏览器都支持剪贴板访问所以有时候更容易屏蔽一个或多个剪贴板操作。

在支持copy、cut

paste

可以通过很多方式来增强表单字段的易用性。

最常用的是在当前字段完成时自动切换到下一个字段。

对于要收集数据的长度已知比如电话号码的字段是可以这样处理的。

在美国电话号码通常分为

个部分区号、交换局号外加

maxlength4为增加这个表单的易用性并加速数据输入可以在每个文本框输入到最大允许字符数时自动把焦点切换到下一个文本框。

因此当用户在第一个文本框中输入

个字符后把焦点再移到第三个文本框。

这种自动切换文本框的行为可以通过如下代码实现script

function

textbox.addEventListener(keyup,

tabForward);

document.getElementById(txtTel1);

let

document.getElementById(txtTel2);

let

document.getElementById(txtTel3);

/script这个

tabForward()函数是实现自动切换的关键。

它通过比较用户输入文本的长度与

maxlength属性的值来检测输入是否达到了最大长度。

如果两者相等因为浏览器会强制最大字符数所以不可能出现多的情况那么就要通过循环表单中的元素集合找到当前文本框并把焦点设置到下一个元素。

这个函数接着给每一个文本框都指定了

onkeyup

事件会在每个新字符被插入到文本框中时触发所以此时应该是检测文本框内容长度的最佳时机。

在填写这个简单的表单时用户不用按

Tab

键切换字段和提交表单。

不过要注意上面的代码只适用于之前既定的标记没有考虑可能存在的隐藏字段。

HTML5

HTML5为浏览器新增了在提交表单前验证数据的能力。

这些能力实现了基本的验证即使JavaScript不可用或加载失败也没关系。

这是因为浏览器自身会基于指定的规则进行验证并在出错时显示适当的错误消息无须

HTML5

标记指定对特定字段的约束然后浏览器会根据这些约束自动执行表单验证。

必填字段

属性的字段都必须有值否则无法提交表单。

这个属性适用于input、textarea和select字段Opera

直到版本

document.forms[0].elements[username].required;还可以使用下面的代码检测浏览器是否支持

required

这行代码使用简单的特性检测来确定新创建的input元素上是否存在

required

属性。

注意不同浏览器处理必填字段的机制不同。

Firefox、Chrome、IE

Opera

值。

这些类型属性不仅表明了字段期待的数据类型而且也提供了一些默认验证其中两个新的输入类型是已经得到广泛支持的email和url二者都有浏览器提供的自定义验证。

比如input

typeemail

namehomepage“email类型确保输入的文本匹配电子邮件地址而url类型确保输入的文本匹配

URL。

注意浏览器在匹配模式时都存在问题。

最明显的是文本”--会被认为是有效的电子邮件地址。

浏览器厂商仍然在解决这些问题。

要检测浏览器是否支持这些新类型可以在

JavaScript

中新创建一个输入元素并将其类型属性设置为email或url然后再读取该元素的值。

老版本浏览器会自动将未知类型值设置为text而支持的浏览器会返回正确的值。

比如let

input

属性否则空字段是有效的。

另外指定一个特殊输入类型并不会阻止用户输入无效的值。

新类型只是会应用一些默认验证。

数值范围

还定义了其他几种新的输入元素类型它们都是期待某种数值输入的包括“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week和time”。

并非所有主流浏览器都支持这些类型因此使用时要当心。

浏览器厂商目前正致力于解决兼容性问题和提供更逻辑化的功能。

本节内容更多地是介绍未来趋势而不是讨论当前就能用的功能。

对上述每种数值类型都可以指定

min

namecount根据浏览器的不同可能会也可能不会出现旋转控件上下按钮用于自动增加和减少。

上面每个属性在

JavaScript

stepDown()。

这两个方法都接收一个可选的参数要从当前值加上或减去的数值。

默认情况下步长值会递增或递减

1。

虽然浏览器还没有实现这些方法但可以先看一下它们的用法input.stepUp();

input.stepUp(5);

属性。

这个属性用于指定一个正则表达式用户输入的文本必须与之匹配。

例如要限制只能在文本字段中输入数字可以这样添加模式input

typetext

namecount注意模式的开头和末尾分别假设有^和$。

这意味着输入内容必须从头到尾都严格与模式匹配。

与新增的输入类型一样指定

pattern

属性也不会阻止用户输入无效内容。

模式会应用到值然后浏览器会知道值是否有效。

通过访问

pattern

document.forms[0].elements[count].pattern;使用如下代码可以检测浏览器是否支持

pattern

document.createElement(input);检测有效性

checkValidity()方法可以检测表单中任意给定字段是否有效。

这个方法在所有表单元素上都可以使用如果字段值有效就会返回

true否则返回

false。

判断字段是否有效的依据是本节前面提到的约束条件因此必填字段如果没有值就会被视为无效而字段值不匹配

pattern

(document.forms[0].elements[0].checkValidity()){

字段有效继续

checkValidity()方法。

这个方法会在所有字段都有效时返回

true有一个字段无效就会返回

falseif(document.forms[0].checkValidity()){

表单有效继续

}checkValidity()方法只会告诉我们字段是否有效而

validity

属性会告诉我们字段为什么有效或无效。

这个属性是一个对象包含一系列返回布尔值的属性。

true否则返回

false。

patternMismatch如果字段值不匹配指定的

pattern

false。

typeMismatch如果字段值不是email或url要求的格式则返回

false

checkValidity()的条件一致。

valueMissing如果字段是必填的但没有值则返回

validity

属性可以检查表单字段的有效性从而获取更具体的信息如下面的代码所示if

(input.validity

表示属性不存在document.forms[0].noValidate

true;

关闭验证如果一个表单中有多个提交按钮那么可以给特定的提交按钮添加

formnovalidate

/form在这个例子中第一个提交按钮会让表单像往常一样验证数据第二个提交按钮则禁用了验证可以直接提交表单。

我们也可以使用

JavaScript

document.forms[0].elements[btnNoValidate].formNoValidate

true;选择框编程

选择框是使用select和option元素创建的。

为方便交互HTMLSelectElement

add(newOption,

之前向控件中添加新的option。

multiple布尔值表示是否允许多选等价于

HTML

HTMLCollection。

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

selectedIndex选中项基于

的索引值如果没有选中项则为–1。

对于允许多选的列表始终是第一个选项的索引。

size选择框中可见的行数等价于

HTML

属性可能是select-one或select-multiple具体取决于

multiple

属性。

如果没有选中项则选择框的值是空字符串。

如果有一个选中项且其

value

属性没有指定值则选择框的值是该项的文本内容。

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

namelocation

/select如果选中这个选择框中的第一项则字段的值就是Sunnyvale,

CA。

如果文本为China的项被选中则字段的值是一个空字符串因为该项的

value

属性是空字符串。

如果选中最后一项那么字段的值是Australia因为该option元素没有指定

value

对象表示。

HTMLOptionElement类型为方便数据存取添加了以下属性。

index选项在

属性。

selected布尔值表示是否选中了当前选项。

把这个属性设置为

true

document.forms[0].elements[location];

不推荐

selectbox.options[0].firstChild.nodeValue;

选项文本

selectbox.options[0].getAttribute(value);

DOM

技术获取了选择框中第一个选项的文本和值。

下面再比较一下使用特殊选项属性的代码let

selectbox

document.forms[0].elements[location];

let

选项值在操作选项时最好使用特定于选项的属性因为这些属性得到了跨浏览器的良好支持。

在操作DOM

DOM

事件与其他表单字段是不一样的。

其他表单字段会在自己的值改变后触发

change

selectbox.options[selectbox.selectedIndex];这样可以获取关于选项的所有信息比如let

selectedIndex

selectbox.options[selectedIndex];

console.log(Selected

${selectedOption.value});以上代码打印出了选中项的索引及其文本和值。

对于允许多选的选择框selectedIndex

selectedIndex

只会返回选中的第一项的索引。

选项还可以通过取得选项的引用并将其

selected

来选中。

例如以下代码会选中选择框中的第一项selectbox.options[0].selected

true;与

属性不会在多选时移除其他选项从而可以动态选择任意多个选项。

如果修改单选框中选项的

selected

属性可以确定选择框中哪个选项被选中。

要取得所有选中项需要循环选项集合逐一检测

selected

}这个函数会返回给定选择框中所有选中项的数组。

首先创建一个包含结果的数组然后通过

for

getSelectedOptions()函数可以用于获取选中项的信息比如let

selectbox

document.getElementById(selLocation);

let

console.log(message);这个例子先检索了一个选择框的所有选中项。

然后通过

for

循环构建包含所有选中项信息的字符串包括每项的索引、文本和值。

以上代码既适用于单选框也适用于多选框。

添加选项

document.createElement(option);

newOption.appendChild(document.createTextNode(Option

text));

selectbox.appendChild(newOption);以上代码创建了一个新的option元素使用文本节点添加文本设置其

value

属性然后将其添加到选择框。

添加到选择框之后新选项会立即显示出来。

另外也可以使用

Option

合规的浏览器都会返回一个option元素。

这意味着仍然可以使用

appendChild()方法把这样创建的选项添加到选择框。

比如下面的例子let

newOption

selectbox.appendChild(newOption);

IE8

及更低版本在这种情况下不能正确设置新选项的文本。

另一种添加新选项的方式是使用选择框的

规定这个方法接收两个参数要添加的新选项和要添加到其前面的参考选项。

如果想在列表末尾添加选项那么第二个参数应该是

及更早版本对

add()方法的实现稍有不同其第二个参数是可选的如果要传入则必须是一个索引值表示要在其前面添加新选项的选项。

DOM

合规的浏览器要求必须传入第二个参数因此在跨浏览器方法中不能只使用一个参数IE9

DOM

作为第二个参数可以保证在所有浏览器中都将选项添加到列表末尾。

下面是一个例子let

newOption

removeChild()方法并传入要移除的选项比如selectbox.removeChild(selectbox.options[0]);

remove()方法。

这个方法接收一个参数即要移除选项的索引比如selectbox.remove(0);

DOM

之前浏览器实现的方式。

下面是一个例子selectbox.options[0]

null;

移除第一项要清除选择框的所有选项需要迭代所有选项并逐一移除它们如下面例子所示function

for

}这个函数可以逐一移除选择框中的每一项。

因为移除第一项会自动将所有选项向前移一位所以这样就可以移除所有选项。

移动和重排选项

之前从一个选择框向另一个选择框移动选项是非常麻烦的要先从第一个选择框移除选项然后以相同文本和值创建新选项再将新选项添加到第二个选择框。

DOM

方法则可以直接将某个选项从第一个选择框移动到第二个选择框只要对相应选项使用

appendChild()方法即可。

如果给这个方法传入文档中已有的元素则该元素会先从其父元素中移除然后再插入指定位置。

例如下面的代码会从选择框中移除第一项并插入另一个选择框let

selectbox1

document.getElementById(selLocations1);

let

document.getElementById(selLocations2);

selectbox2.appendChild(selectbox1.options[0]);移动选项和移除选项都会导致每个选项的

index

方法同样是最佳途径。

要将选项移动到选择框中的特定位置insertBefore()方法是最合适的。

不过要把选项移动到最后还是

appendChild()方法比较方便。

下面的代码演示了将一个选项在选择框中前移一个位置let

optionToMove

selectbox.insertBefore(optionToMove,

selectbox.options[optionToMove.index-1]);这个例子首先获得要移动选项的索引然后将其插入之前位于它前面的选项之前其中第二行代码适用于除第一个选项之外的所有选项。

下面的代码则可以将选项向下移动一个位置let

optionToMove

selectbox.insertBefore(optionToMove,

selectbox.options[optionToMove.index2]);以上代码适用于选择框中的所有选项包括最后一个。

表单序列化

属性来进行序列化。

在写代码之前我们需要理解浏览器如何确定在提交表单时要把什么发送到服务器。

URL

编码的并以和号分隔。

禁用字段不会发送。

复选框或单选按钮只在被选中时才发送。

类型为reset或button的按钮不会发送。

多选字段的每个选中项都有一个值。

通过点击提交按钮提交表单时会发送该提交按钮否则不会发送提交按钮。

类型为image的input元素视同提交按钮。

select元素的值是被选中option元素的

value

表单序列化通常不包含任何按钮因为序列化得到的字符串很可能以其他方式提交。

除此之外其他规则都应该遵循。

最终完成表单序列化的代码如下function

serialize(form)

(option.attributes[value].specified

option.value

parts.push(encodeURIComponent(field.name)

break;

parts.push(${encodeURIComponent(field.name)}

${encodeURIComponent(field.value)});

return

属性。

最麻烦的是序列化select元素包括单选和多选两种模式。

在遍历选择框的每个选项时只要有选项被选中就将其添加到结果字符串。

单选控件只会有一个选项被选中多选控件则可能有零或多个选项被选中。

同样的代码适用于两种选择类型因为浏览器会限制可选项的数量。

找到选中项时需要确定使用哪个值。

如果不存在

value

属性。

表单中如果有fieldset元素它就会出现在元素集合中但应该没有

type

undefined则不必纳入序列化。

各种类型的按钮以及文件输入字段也是如此。

文件输入字段在提交表单时包含文件的内容但这些字段通常无法转换因而也要排除在序列化之外。

对于单选按钮和复选框会检测其

checked

数组。

注意所有没有名字的表单字段都不会包含在序列化结果中以模拟浏览器的表单提交行为。

这个函数的最后一步是使用

join()通过和号把所有字段的名值对拼接起来。

serialize()函数返回的结果是查询字符串格式。

如果想要返回其他格式修改起来也很简单。

富文本编辑

应用开发中很常见的需求。

富文本编辑也就是所谓的“所见即所得”WYSIWYGWhat

You

属性可以将这个空白文档变成可以编辑的实际编辑的则是body元素的

属性有两个可能的值“off”默认值和on。

设置为on时整个文档都会变成可以编辑的显示插入光标从而可以像使用文字处理程序一样编辑文本通过键盘将文本标记为粗体、斜体等等。

作为

iframe

属性设置为on。

不过只有在文档完全加载之后才可以设置。

在这个包含页面内需要使用

onload事件处理程序在适当时机设置

frames[richedit].document.designMode

on;

/script以上代码加载之后可以在页面上看到一个类似文本框的区域。

这个框的样式具有网页默认样式不过可以通过

CSS

属性然后该元素会立即被用户编辑。

这种方式更受欢迎因为不需要额外的

iframe、空页面和

contenteditable/div元素中包含的任何文本都会自动被编辑元素本身类似于textarea元素。

通过设置contentEditable

div

document.getElementById(richedit);

true;contentEditable

个可能的值true表示开启false表示关闭inherit表示继承父元素的设置因为在

contenteditable

元素内部会创建和删除元素。

IE、Firefox、Chrome、Safari

Opera

contenteditable可以把浏览器窗口转换为一个记事本。

这是因为这样会临时创建

DOM

document.execCommand()。

这个方法在文档上执行既定的命令可以实现大多数格式化任务。

document.execCommand()可以接收

个参数要执行的命令、表示浏览器是否为命令提供用户界面的布尔值和执行命令必需的值如果不需要则为

false因为

命令值第三个参数说明backcolor颜色字符串设置文档背景颜色boldnull切换选中文本的粗体样式copynull将选中文本复制到剪贴板createlinkURL

字符串将当前选中文本转换为指向给定

的链接cutnull将选中文本剪切到剪贴板deletenull删除当前选中的文本fontname字体名将选中文本改为使用指定字体fontsize1~7将选中文本改为指定字体大小forecolor颜色字符串将选中文本改为指定颜色formatblockHTML

HTML

标签中indentnull缩进文本inserthorizontalrulenull在光标位置插入hr元素insertimage图片

URL在光标位置插入图片insertorderedlistnull在光标位置插入ol元素insertparagraphnull在光标位置插入p元素insertunorderedlistnull在光标位置插入ul元素italicnull切换选中文本的斜体样式justifycenternull在光标位置居中文本块justifyleftnull在光标位置左对齐文本块outdentnull减少缩进pastenull在选中文本上粘贴剪贴板内容removeformatnull移除包含光标所在位置块的

HTML

的反操作selectallnull选中文档中所有文本underlinenull切换选中文本的下划线样式unlinknull移除文本链接。

这是

createlink

document.execCommand()使用但相应的键盘快捷键都是可以用的。

这些命令可以用于修改内嵌窗格iframe中富文本区域的外观如下面的例子所示

在内嵌窗格中切换粗体文本样式

frames[richedit].document.execCommand(bold,

false,

frames[richedit].document.execCommand(italic,

false,

frames[richedit].document.execCommand(createlink,

false,

frames[richedit].document.execCommand(formatblock,

false,

document.execCommand(createlink,

false,

document.execCommand(formatblock,

false,

queryCommandEnabled()此方法用于确定对当前选中文本或光标所在位置是否可以执行相关命令。

它只接收一个参数即要检查的命令名。

如果可编辑区可以执行该命令就返回

true否则返回

frames[richedit].document.queryCommandEnabled(bold);以上代码在当前选区可以执行bold命令时返回

true。

不过要注意queryCommandEnabled()返回

true

中queryCommandEnabled(“cut”)即使默认不允许剪切也会返回

另一个方法

queryCommandState()用于确定相关命令是否应用到了当前文本选区。

例如要确定当前选区的文本是否为粗体可以这样

let

frames[richedit].document.queryCommandState(bold);如果之前给文本选区应用过bold命令则以上代码返回

true。

全功能富文本编辑器可以利用这个方法更新粗体、斜体等按钮。

queryCommandValue()此方法可以返回执行命令时使用的值即前面示例的execCommand()中的第三个参数。

如果对一段选中文本应用了值为

let

frames[richedit].document.queryCommandValue(fontsize);这个方法可用于确定如何将命令应用于文本选区从而进一步决定是否需要执行下一个命令。

富文件选择

getSelection()方法可以获得富文本编辑器的选区。

这个方法暴露在document

window

anchorNode选区开始的节点。

anchorOffset在

anchorNode

中从开头到选区开始跳过的字符数。

focusNode选区结束的节点。

focusOffsetfocusNode

中包含在选区内的字符数。

isCollapsed布尔值表示选区起点和终点是否在同一个地方。

rangeCount选区中包含的

DOM

的属性并没有包含很多有用的信息。

好在它的以下方法提供了更多信息并允许操作选区。

DOM

offset)将选区折叠到给定节点中给定的文本偏移处。

collapseToEnd()将选区折叠到终点。

collapseToStart()将选区折叠到起点。

containsNode(node)确定给定节点是否包含在选区中。

deleteFromDocument()从文档中删除选区文本。

与执行

false,

移动到指定值来扩展选区。

getRangeAt(index)返回选区中指定索引处的

DOM

范围。

这实际上会移除选区因为选区中至少要包含一个范围。

removeRange(range)从选区中移除指定的

DOM

范围。

selectAllChildren(node)清除选区并选择给定节点的所有子节点。

toString()返回选区中的文本内容。

Selection

execCommand()更细粒度的控制因为可以直接对选中文本的

DOM

frames[richedit].getSelection();

let

frames[richedit].document.createElement(span);

yellow;

range.surroundContents(span);以上代码会在富文本编辑器中给选中文本添加黄色高亮背景。

实现方式是在默认选区使用

DOM

surroundContents()方法给选中文本添加背景为黄色的span标签。

getSelection()方法在

HTML5

的属性。

要取得富文本编辑器中选中的文本必须先创建一个文本范围然后再访问其

text

frames[richedit].document.selection.createRange();

let

frames[richedit].document.selection.createRange();

range.pasteHTML(

stylebackground-color:yellow${range.htmlText}/span);以上代码使用

htmlText

HTML然后用一个span标签将其包围起来并通过pasteHTML()再把它插入选区中。

contenteditable

属性实现的而不是在表单控件中实现所以富文本编辑器技术上与表单没有关系。

这意味着要把富文本编辑的结果提交给服务器必须手工提取

HTML

并自己提交。

通常的解决方案是在表单中添加一个隐藏字段使用内嵌窗格或contenteditable

HTML

并插入隐藏字段中。

例如以下代码在使用内嵌窗格实现富文本编辑时可以用在表单的

onsubmit

事件处理程序中form.addEventListener(submit,

(event)

target.elements[comments].value

frames[richedit].document.body.innerHTML;

innerHTML

HTML然后将其插入名为comments的表单字段中。

这样做可以确保在提交表单之前给表单字段赋值。

如果使用

submit()方法手工提交表单那么要注意在提交前先执行上述操作。

对于

contenteditable

元素执行这一操作的代码是类似的form.addEventListener(submit,

(event)

target.elements[comments].value

document.getElementById(richedit).innerHTML;

});小结

可以增加现有的表单字段以提供新功能或增强易用性。

为此表单字段也暴露了属性、方法和事件供

JavaScript

可以使用标准或非标准的方法全部或部分选择文本框中的文本。

所有浏览器都采用了

Firefox

操作文本选区的方式使其成为真正的标准。

可以通过监听键盘事件并检测要插入的字符来控制文本框接受或不接受某些字符。

copy、cut

paste。

剪贴板事件在不同浏览器中的实现有很大差异。

在文本框只限某些字符时可以利用剪贴板事件屏幕粘贴事件。

选择框也是经常使用

JavaScript

技术可以为选择框添加或移除选项也可以将选项从一个选择框移动到另一个选择框或者重排选项。

富文本编辑通常以使用包含空白

HTML

属性设置为on可以让整个页面变成编辑区就像文字处理软件一样。

另外给元素添加

contenteditable属性也可以将元素转换为可编辑区。

默认情况下可以切换文本的粗体、斜体样式也可以使用剪贴板功能。

JavaScript

queryCommandEnabled()、queryCommandState()和

queryCommandValue()方法则可以获取有关文本选区的信息。

由于富文本编辑区不涉及表单字段因此要将富文本内容提交到服务器必须把

HTML