JS DOM表单操作（补充）

1.DOM表单操作

1.1 快速获取表单元素

• 快速获取表单元素 form.标签name属性

  //1.获取元素
  var oForm = document.getElementsByTagName("form")[0];
  ​
  //2.快速获取表单元素  form.标签name属性
  console.log(oForm.user);
  console.log(oForm.password);
  console.log(oForm.sex); //RadioNodeList(2) [input, input, value: "on"]
  console.log(oForm.sex.value);
  console.log(oFormhobby);

1.2 表单事件

• 表单事件

  • oForm.onsubmit : 提交表单的时候触发

    return true : 默认 允许提交

    return false：阻止提交

    //2.  oForm.onsubmit : 提交表单的时候触发
    oForm.onsubmit = function(){
        if(oForm.user.value == ""){
            alert("请输入内容");
            //阻止提交
            return false;
        }
    }

  • oForm.onreset : 重置表单的时候触发

    return true : 默认 允许重置

    return false：阻止重置

    //3.oForm.onreset : 重置表单的时候触发
    oForm.onreset = function(){
        //带确认的对话框，确定--true   取消---false
        var s = confirm("是否需要重置");
        if(s == true){
            return true;
        }else{
            return false;
        }
    }

• 表单元素事件

  • input.onblur : 失去焦点时触发

  • input.onfocus : 获取焦点时触发

    //4.input.onfocus : 获取焦点时触发
    oForm.user.onfocus = function(){
        this.style.background = "green";
    }
    //5.input.onblur : 失去焦点时触发
    oForm.user.onblur = function(){
        this.style.background = "red";
    }

  • input.oninput : 内容发生变化时触发 / ie: input.onpropertychange

    //6. input.oninput : 内容发生变化时触发
    /*oForm.user.oninput = function(){ //标准
        console.log(this.value);
    }
    oForm.user.onpropertychange = function(){ //ie
        console.log(this.value); 
    }*/
    oForm.user.oninput = change;
    oForm.user.onpropertychange = change; 
    function change(){
        console.log(this.value);
    }

  • input.onchange : 失去焦点时内容和上一次相比发生变化时触发

    //7.input.onchange : 失去焦点时内容发生变化时触发
    oForm.user.onchange = function(){
        console.log(this.value);
    }