【Javascript】入门之操作表单元素

1. 表单操作

 <form action="">
        姓名: <input type="text" name="user" value="1234"><br>
        密码: <input type="text" name="pass"><br>
        性别: <input type="radio" name="sex" id="" checked value="male">男<input type="radio" name="sex" id="" value="female">女<br>
        爱好: <input type="checkbox" value="cf" name="hobby" id="">吃饭
        <input type="checkbox" checked value="sj" name="hobby" id="">睡觉
        <input type="checkbox" checked value="ddd" name="hobby" id="">打豆豆
        <input type="checkbox" value="bxx" name="hobby" id="">不学习
        <input type="checkbox" value="bbs" name="hobby" id="">不背书
    </form>

获取form

 var form = document.getElementsByTagName('form')[0];

快速获取表单中的元素: form.name值

获取值:form.name值.value

console.log(form.user);
console.log(form.user.value); // 1234
console.log(form.sex); // RadioNodeList 集合
console.log(form.sex.value); // male
console.log(form.hobby); // RadioNodeList'

无法通过form.name值.value的形式获取复选框的选中值, 这里需要通过数组

var arr = [];
    for(var i =0; i < form.hobby.length; i++){
          if(form.hobby[i].checked == true){
               arr.push(form.hobby[i].value);
       }
 }
console.log(arr);

2.表单事件

1. 提交: onsubmit

当点击按钮触发表单的提交
return true: 表单可以被提交
return false: 表单不允许提交
form表单元素.onsubmit = function(){}

2. 重置: onreset

表单.onreset
当表单被重置的时候
return true: 表单可以被重置
return false: 表单不允许被重置

3. 聚焦: onfocus

表单中的元素.onfocus
当输入框获取焦点的时候 会触发事件

4. 失去焦点: onblur

元素.onblur
当输入框失去焦点的时候 会触发事件

5. 输入框失去焦点且内容改变的时候: onchange

元素.onchange
当输入框失去焦点并且内容与上一次内容发生改变得时候会触发

6. 边输入边触发: oninput onpropertychange

元素.oninput/onpropertychange
在输入框中一边输入一边触发

 		var form = document.getElementsByTagName('form')[0];
        console.log(form);

        // 给提交按钮加上点击事件
        console.log(form.sub);
        form.sub.onclick = function(){}

        form.onsubmit = function(){
            console.log(1);

            // return false;
            // 当姓名和密码有一个没有输入的时候  不允许提交
            if(form.user.value == '' || form.pass.value == ''){
                alert('请填写完整信息');
                return false;
            }
        }

        // 重置事件
        form.onreset = function(){
            // 如果姓名和密码都输入了，重置 否则不重置
            if(form.user.value != '' && form.pass.value != ''){
                return true;
            } else {
                return false;
            }
        }

        // 聚焦
        form.user.onfocus = function(){
            this.style.background = 'pink';
        }

        // 失去焦点
        form.user.onblur = function(){
            this.style.background = 'green';
        }

        // 改变内容
        form.pass.onchange = function(){
            this.style.background = 'orange';
        }

        // 边输入边触发
        // 事件可以连等 表示触发同一个事件处理函数
        form.pass.oninput = form.pass.onpropertychange = function(){
            console.log(this.value);
        }

3. 表单方法与表单元素方法

表单方法

重置: 表单.reset();
提交: 表单.submit();

表单元素方法

聚焦: 元素.focus();
失焦: 元素.blur();
自动选择: 元素.select();

		var divs = document.getElementsByTagName('div');
		var form = document.getElementsByTagName('form')[0];
		console.log(divs);
        // 点击提交div
        divs[0].onclick = function(){
            // 如果用户名和密码都输入了就可以提交
            if(form.user.value != '' && form.pass.value != ''){
                form.submit();
            } else {
                console.log('信息不全');
            }
        }
        // 点击重置
        // 如果用户名或者密码输入了  重置
        divs[1].onclick = function(){
            if(form.user.value != '' || form.pass.value != ''){
                form.reset();
            } else{
                console.log('无需重置');
            }
        }

        // 点击聚焦  用户名输入框聚焦
        divs[2].onclick = function(){
            form.user.focus();
        }

        // 等待10s  用户名输入框失去焦点
        setTimeout(function(){
             console.log(1);
             form.user.blur();
         }, 10000);


        // 等待页面3s  让输入框自动选择
        setTimeout(function(){
            // form.user.select();
            form.sex[1].select();
        }, 3000);