表单脚本基础知识

Posted 2020-10-21 决起而飞

表单脚本知识

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