博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
表单脚本基础知识
阅读量:4318 次
发布时间:2019-06-06

本文共 2213 字,大约阅读时间需要 7 分钟。

表单脚本知识

1基本知识

属性和方法

action:URL地址,elements:表单控件集合,length:表单空间数量,method:发送http请求类型,通常是get或者post,name:表单名称,target:用于发送请求和接收响应的窗口名称

1.1提交表单

在js操作时候,不会触发submit事件,应该验证表单数据

input提交
image btn

      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属性,

 

转载于:https://www.cnblogs.com/iDouble/p/8322333.html

你可能感兴趣的文章
JMeter响应数据出现乱码的处理-三种解决方式
查看>>
No qualifying bean of type available问题修复
查看>>
spfile
查看>>
Team Foundation Service更新:改善了导航和项目状态速查功能
查看>>
Cookie/Session机制具体解释
查看>>
ATMEGA16 IOport相关汇总
查看>>
JAVA基础-多线程
查看>>
面试题5:字符串替换空格
查看>>
[Codevs] 线段树练习5
查看>>
Amazon
查看>>
component-based scene model
查看>>
Echart输出图形
查看>>
hMailServer搭建简单邮件系统
查看>>
从零开始学习jQuery
查看>>
Spring+SpringMVC+MyBatis深入学习及搭建(四)——MyBatis输入映射与输出映射
查看>>
opacity半透明兼容ie8。。。。ie8半透明
查看>>
CDOJ_24 八球胜负
查看>>
Alpha 冲刺 (7/10)
查看>>
一款jQuery打造的具有多功能切换的幻灯片特效
查看>>
SNMP从入门到开发:进阶篇
查看>>