表单脚本基础知识
表单脚本知识
1基本知识
属性和方法
action：URL地址，elements：表单控件集合，length：表单空间数量，method：发送http请求类型，通常是get或者post，name：表单名称，target：用于发送请求和接收响应的窗口名称
1.1提交表单
在js操作时候，不会触发submit事件，应该验证表单数据
<form action="">
<button type="submit">btn提交</button><br>
<input type="submit">input提交<br>
<input type="image" src="1.jpg" alt="图片">image btn
<!--表单存在这类的按钮同时相应的控件比如text有焦点时，直接用enter提交了,浏览器将请求发送给服务器之前触发submit事件-->
</form>
EventUtil.addHandler(form,"submit",function(event){ //阻止默认事件
event=EventUtil.getEvent(event)
EventUtil.preventDefault(event)
})
1.2重置表单
跟提交一样reset，不过在js操作时候，一样会触发reset事件
1.3表单字段
可以使用DOM方法，也可以使用表单的elements属性，var field=form.elements[1]
1.3.1表单字段共同拥有的属性
disabled布尔值是否禁用，name当前字段名称，readOnly布尔值是否只读，type当前字符按的类型，value当前字段将被提交给服务器的值
//避免多次提交表单，这里不用click避免出现浏览器的不兼容问题 EventUtil.addHandler(form2,"submit",function(event){ event=EventUtil.getEvent(event) var target=EventUtil.getTarget(event) //取得表单按钮避免耦合性，用target var btn=target.elements["submitname"] btn.disabled=true console.log(btn.disabled) })
1.3.2表单字段共同拥有的方法
focus()和blur()，当然html5提供autofocus属性，一般用于表单字段，其他控件可以通过tabIndex属性设置为-1，然后调用focus方法
1.3.3表单字段共同拥有的事件
focus事件，blur事件，以及change事件（当失去焦点且value值改变时触发）
2文本框脚本
文本框分为单行文本框和多行文本框，text有size和maxlength等等，textarea通过col和row来进行的，
选择文本：选择方法和选择事件；取得选择文本：selectionStart和selectionEnd，表示所选文本的范围，保存是数值
2.1过滤输入
2.1.1遮蔽字符
EventUtil.addHandler(username,"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){ //将字符编码转为字符串,通过test测试 EventUtil.preventDefault(event) } })
2.1.2操作剪贴板
3HTML5约束API
3.1必填字段
HTML5增加属性required的，还有其他的输入类型，
email number URL range datetime datetim-local date month week time，浏览器支持度需要考虑，还有step属性增加减少，方法为stepUp stepDown
还有pattern属性值为正则，用于匹配文本值 pattern=“\d+”
检测有效性
checkValid（）方法检测，返回布尔值，validity属性会有很多来具体的检测
if(document.form[0].elements[0].checkValidity()){ //操作 } else { }//操作
禁用验证通过设置novalidate
4富文本编辑
所见即所得，两种方式，
在页面中嵌入包含空HTML页面的iframe。设置designMode属性，
