表单处理

最新推荐文章于 2024-09-11 00:43:50 发布

wenjuanzhao

最新推荐文章于 2024-09-11 00:43:50 发布

阅读量695

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_26746521/article/details/53709622

版权

javaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

所有的表单都是在标签form中的

得到form对象的方法

1、id
2、class
3、document.forms[0]

提交表单的方法

使用提交按钮

注意的是:如果没有action 会自动的提交到本页

实现阻止事件的默认提交

 var Myform=document.getElementById("Myform");
     addEvent(Myform,'submit',function (e) {
        predefault(e);
    })

submit事件为什么是form来触发的，而不是submit按钮来触发？submit绑定到form的上边的才可以触发表单的提交。这个按钮有点击事件，但是没有提交的事件。

自定义的表单提交

html代码

<form id="Myform">
         <input type="text" >
         <input type="submit" value="提交">
         <button id="button">模拟提交</button>
     </form>

js代码

 var Myform=document.getElementById("Myform");
    var button=document.getElementById("button");
     addEvent(Myform,'submit',function (e) {
        predefault(e);
    })
    addEvent(button,'click',function () {
        Myform.submit();
    })

阻止了提交按钮的默认提交，使用普通的按钮模拟了表单的提交

按下ctrl+enter键提交表单

addEvent(document,'keydown',function (e) {
        var event=e||window.event;
        if(event.ctrlKey&&event.keyCode==13){
            Myform.submit();
        }
    })

重复的提交表单

提交数据的最大的问题就是重复的提交表单，由于各种原因，当一条数据提交到服务器的时候会出现延迟等长时间没有反应，导致用户不停地点击提交，从而使的提交了很多次相同的请求，造成错误、或重复写入数据库多条信息
两种解决的办法：
1、提交之后，立刻禁用点击按钮（这种情况限于有按钮的提交）

  addEvent(Myform,'submit',function (e) {
        predefault(e);
         alert(1);
         document.getElementById("sub").disabled=true;
    })

F5只能浅刷新，也就是缓存级别的，使用ctrl+F5实现从服务器端来刷新
2、提交之后取消之后的表单提交操作

  var flag=false;
     addEvent(Myform,'submit',function (e) {
        predefault(e);
         if(flag){
             return ;
         }
         flag=true;
         alert(1)
    })

这两种方法就可以解决了用户的重复提交
与sumit方法对应的也有一个reset方法

访问表单的字段

注意form对象的elements

   <form id="Myform">
         <p>sasas</p>
         <input type="text" >
         <p>sasa</p>
         <input type="submit" value="提交" id="sub">
         <button id="button" >模拟提交</button>
         <strong>sasa</strong>
     </form>

js代码

    var Myform=document.getElementById("Myform");
    alert(Myform.elements[0].tagName);   //input而不是p

共有的表单字段属性

disabled
form 得到从属的form对象
name readOnly type（类型） value

表单字段共有的方法

focus blur
在文档载入了以后，让input自动获得焦点

    var Myform=document.getElementById("Myform");
    Myform.elements[0].focus();

共有的表单字段的事件

change blur focus

文本框脚本

selelct事件
非IE选定文本且释放鼠标后触发select事件
IE只要选定了一个字符就触发，
取得选择的文本
使用的是表单的selectionStart和selectionEnd属性

    var user=Myform.elements['user'];
    addEvent(user,'select',function () {
        alert(this.value.substring(this.selectionStart,this.selectionEnd))
    })

过滤输入
1、禁止或者屏蔽非法字符，非法字符输不进去
实现只能输入数字不能输入字母


    var content=document.getElementById("content");
    addEvent(content,'keypress',function(evt){
           var e=evt||window.event;
         var charCode=getCharCode(e);
        if(!/\d/.test(String.fromCharCode(charCode))&&charCode>0){
            predefault(evt)
        }
    })

当复制表单的内容的时候会触发这个事件

  var content=document.getElementById("content");
    addEvent(content,'copy',function(evt){
           console.log(111);
    })

实现阻止复制，粘贴，剪切的代码

   addEvent(content,'copy',function(evt){
        alert("禁止复制")
        predefault(evt);
    })
    addEvent(content,'paste',function(evt){
        alert("禁止粘贴")
        predefault(evt);
    })
    addEvent(content,'cut',function(evt){
        alert("禁止剪切")  
        predefault(evt);
    })

实现禁止输入法输入

  <textarea name="content" id="content" style="ime-mode: disabled">

         </textarea>

这个屏蔽只能在谷歌浏览器中有效

2、你可以先非法字符，验证结束后，取消你敢输入的文本

自动切换文本框的焦点

html的代码

           <input type="text" name="a1" maxlength="1">
         <input type="text" name="a2" maxlength="3">
         <input type="text" name="a3" maxlength="5">

js代码

   addEvent(Myform.elements['a1'],"keyup",tabForWord);
    addEvent(Myform.elements['a2'],"keyup",tabForWord);
    addEvent(Myform.elements['a3'],"keyup",tabForWord);
    function tabForWord(evt){
    var e=evt||window.event;
    if(this.value.length==this.maxLength){
          //遍历素有控件
        for(var i=0;i<Myform.elements.length;i++){
            if(Myform.elements[i]==this){
                Myform.elements[i+1].focus();
                return ;
            }
        }
    }
}

选择框脚本

获得selection中的所有的options

   var Myform=document.getElementById("Myform");
    var city=Myform.elements['city'];
    alert(city.options.length);

使用两种方法获得所有的option中的value和text

  var city=Myform.elements['city'];
    alert(city.options[0].value+city.options[0].text)   //使用的是htmlDOM
    alert(city.options[0].getAttribute("value")+city.options[0].firstChild.nodeValue)    //使用的是标准的DOM

city的SelectedIndex

实现选择哪个弹出哪个的value和text

    var city=Myform.elements['city'];
    addEvent(city,"change",function(){
        alert(this.options[this.selectedIndex].value+this.options[this.selectedIndex].text)   //使用的是htmlDOM
    })

city中的option的selected

当选择到第二个选项的时候弹出来选对了

    addEvent(city,"change",function(){
        if(this.options[2].selected==true){
            alert("选对了")
        }
    })

为select中添加新的选项

已经实现了兼容

 var option=new Option("dss","sasa");
    city.add(option,undefined);

删除选项

普通的DOM操作

  city.removeChild(city.options[4]);

htmlDOM实现的

   city.remove(3)

移动选项

  var city=Myform.elements['city'];
    var info=Myform.elements['info'];
    addEvent(city,"change",function(){
       info.appendChild(this.options[this.selectedIndex]);
    })