表单脚本知识
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属性,