js高级程序设计-14章表单脚本
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
通过select
和option
来实现
属性
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" 转载请保留原文链接及作者。