js高级程序设计-14章表单脚本

  1. input
    1. 剪切板事件
    2. 输入框约束 API
    3. 其他的类型
    4. 检测有效性
    5. 其他新属性
  2. select
    1. 属性
    2. 方法以及事件
  3. 富文本编辑
    1. 操作富文本

input

剪切板事件

对于剪切板事件,浏览器之间的争议比较大,before copy,beforecut,beforepaste 可以让我们在 copy 等操作之前传递或者修改数据,但是取消他们,并不能取消 copy 等事件。

输入框约束 API

required

对于这个的约束,一般情况下浏览器都是会阻止表单的提交的,但是各个的处理还是有不同,有的会有提示框,有的则没有。而且本身作为 html5 的属性,实现的情况也不能保证,可以

var ifRequireSupported = "required" in document.createElement("input");

用这种属性检测来查看书否支持。

其他的类型

HTML5 又为type增加了一些值,包括 email,url,number,range,date 等等。number 的时候还可以设置 max 和 min,还有 step 来设置间距。支持情况也就那样。包括 patterns。

检测有效性

checkValidity这个方法可以检测是否有效,包括了前面介绍的那些约束。

  • 这个方法可以对单个的表单元素调用,也可以对整个 form 表单使用,只要其中一个字段无效的话,整个的方法会返回 false。

validity属性里面有一系列的属性可以告诉为什么会有效或者无效。包括了各个程度的检验。

form 可以使用novalidate属性不进行验证。与之对应的还有个formnovalidate在 input 使用,可以限制在这个按钮不进行验证。

其他新属性

autocomplete属性为表单自动填写,就是浏览器自动记录上次填写的内容,然后自动完成输入,可以对 form 以及 input 等等来使用。

select

通过selectoption来实现

属性

selectedIndex是保存了选中项的索引,如果有多选的的话,就保留第一个。

multiple可以设置是否可以多选,但是这个的多选 Mac 下得按住 command 再选,win 下需要 ctrl 然后再选。所以建议使用 checkbox 来选这个

option 里面如果设置了 value,那么值就是 value,如果没有设置的话,就是 option 里面的 text,ie8 下会返回空字符串。

方法以及事件

add方法给控件插入新的 option 属性,这个是立刻动态添加的,与之对应的是remove,用来删除。

selectBox.add(new Option("text", "value"));

注意他的 change 方法是只要选中了选项就会触发。而其他的表单字段则是在值被修改并且焦点离开当前字段时才触发。

富文本编辑

以前的富文本编辑就是一个 iframe,然后在页面 onload 之后设置 iframe 的 document 的 designMode 为 on,就可以编辑了。

现在就是使用contentEditable这个属性了,把元素变得像 textarea 一样。

操作富文本

document.execCommand 方法,可以来将富文本进行操作,比如加粗等等,但是实际使用的可能性不大,因为各个浏览器的支持情况不好。
这里的实用性太差,就没怎么看细节,只是知道这个就好了。

todo:14 章末尾的操作富文本方法基本没啥用到的地方,先不看
15 章 canvas 画图
16 章 HTML5 脚本编程
可用性都一般,先 pass 了
18 章 19 章都是将的 xml,感觉价值不大啊


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 981909093@qq.com

文章标题:js高级程序设计-14章表单脚本

文章字数:843

本文作者:泽鹿

发布时间:2019-08-28, 16:45:23

最后更新:2019-08-28, 16:45:23

原始链接:http://panyifei.github.io/2019/08/28/读书笔记/Javascript高级程序设计/14章表单脚本/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏