码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-02-12 22:37:24      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:javascrip   content   第一个字符   表单   命令   focus   string   rip   函数   

          javascript高级程序设计 第十四章--表单脚本
在HTML中表单由<form>元素表示,在js中表单对应的是HTMLFormElement类型,这个类型也有很多属性
和方法;取得表单元素的引用还是为它添加id特性,用DOM操作来获取表单元素;
提交表单:把<input>或<button>元素的type特性设置为"submit",图像按钮把<input>元素的type特性设
置为"image",也可以调用submit()方法, prevetnDefault()方法可以阻止表单提交
重置表单:把<input>或<button>元素的type特性设置为"reset",也可以调用reset()方法
表单字段:每个表单都有elements属性,这个属性是一个元素集合的有序列表,其中包含着表单的所有字段,
如果是多个相同的元素则返回一个NodeList;所有表单字段都有一些相同的属性,比如:disabled, form,
name, readOnly, tabIndex, type, value等,访问这些属性以得到表单字段的信息;所有表单字段都有focus()
和blur()方法,这两个方法仅仅是把焦点转移或移走而已。
文本框脚本
<input>表示单行文本框,<textarea>表示多行文本框,他们的大多特性都相似,但是不能再HTML中给<textarea>
指定最大字符数;
选择文本:调用select()方法选择文本框中的文本,该方法直接调用不接收参数,但会触发select事件;要顺利
地取得选择的文本添加selectionStart和selectionEnd属性,表示选择文本的范围;substring()方法是基于
字符串的偏移量执行操作;选择部分文本调用setSelectionRange()方法,这个方法接收两个参数,要选择的
第一个字符索引和最后一个字符索引。
过滤输入
屏蔽字符:类似阻止表单提交的方法prevetnDefault()可以来屏蔽所有按键操作,当然运用这类方法要结合正则
和字符编码
操作剪贴板:有以下6个操作剪贴板事件:beforecopy, copy, beforecut, cut, beforepaste, paste ,要访问剪贴
板中的数据,要使用clipboardData对象,这个对象也是window对象和event对象的属性,操作clipboardData
对象主要有三个方法,getData() , setData() , clearData()用于从剪贴板中获取数据
必填字段:为表单字段指定required属性
禁用验证:设置novalidate属性表单可以不进行验证
选择框脚本
选择框通过<select>和<option>元素创建,HTMLSelectElement类型也提供了很多属性和方法,其中value
属性 由选中项决定,如果没有选中项返回空字符串;如果value特性未指定返回选项的文本内容,选择框的
change事件只要选中了选项就会触发
选择选项:访问选中项的方法就是使用selectedIndex属性,但是selectedIndex属性只允许选择一样
添加选项:可以使用DOM方法为文本添加节点,并设置其value属性添加到选择框中;第二种方法就是使用
Option构造函数来创建新选项,接收文本值和value值;第三种方法就是调用add()方法,接受两个参数:要添
加的新选项和将位于新选项之后的选项。
移除选项:1.使用DOM操作的removeChild()方法 2.使用选择框的remove()方法 3.将相应的值设为null
富文本编辑:富文本编辑的本质就是在页面中嵌入一个包含空HTML页面的iframe,通过设置designMode
属性为"on"值,就可以编辑文本内容了;另一种编辑富文本的方式就是使用名为contenteditable属性,这个
属性可以应用给页面中任何元素,设置了这个属性的元素就像变成了<textarea>元素一样
操作富文本:与富文本编辑器交互的主要方式就是使用document.execCommand()方法,需要传递三个参数
要执行的命令名称,false,执行命令必须的一个值;queryCommandEnabled()方法用来检测是否可以针对
当前选择的文本执行某个命令,结果返回一个布尔值;queryCommandValue()方法用于取得执行命令时传入
的值
表单域富文本:富文本编辑器中的HTML不会自动提交给服务器,需要手工提取并提交HTML,因为用我们
构建的富文本编辑器并不是一个表单字段,因此在将其内容提交给服务器之前,必须将iframe或contenteditable
元素中的HTML复制到一个表单字段中

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

标签:javascrip   content   第一个字符   表单   命令   focus   string   rip   函数   

原文地址:http://www.cnblogs.com/lugefan/p/6391820.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!