js操作表单总结

一、表单、控件

    <form action="https://www.baidu.com" method="post" name="myForm" accept-charset="UTF-8" enctype="multipart/form-data">
        <input type="text">
        <textarea></textarea>
        <!--三种表单提交按钮-->
        <button type="submit" name="sub">提交</button>
        <input type="submit" value="inp提交">
        <input type="image" src="../../demo/扇形按钮特效/image/home.png">
    </form>

    <script>
        var forms = document.forms;

        // 获取表单的方式
        console.log(forms[0]);
        console.log(forms[0] === forms["myForm"]);
        // 表单属性
        var form = forms[0];
        console.log(form.acceptCharset); // 服务器能够处理的字符集
        console.log(form.action);
        console.log(form.elements);  // 表单内控件集
        console.log(form.length);  // 控件数量
        console.log(form.method);
        console.log(form.name);
        console.log(form.target);
        // 表单方法
        function methods() {
            form.reset();  // 重置
            form.submit();  // 提交
        }

        // 控件属性
        var inp = form.elements[0];
        var btn = form.elements[2];
        console.log(btn.disabled);  // 是否禁用
        btn.disabled = true
        console.log(btn.form);  // 指向表单元素的指针
        console.log(btn.name);  // 控件name
        console.log(inp.readOnly);  // 是否只读
        inp.readOnly = true
        console.log(btn.tabIndex); // 控件切换index
        console.log(inp.tabIndex);
        console.log(inp.type);  // 类型
        inp.value = "only read"
        console.log(inp.value);

        // 控件方法
        var tea = form.elements[1];
        tea.focus();  // 聚焦
        tea.blur();  // 失去焦点

        // 事件
        // blur， 失去焦点时
        // focus， 聚焦时
        // change，input/textare - 值改变并且失去焦点时   select - 选项改变时

        tea.addEventListener("change", function (even) {
            console.log(even.target.value);
        })
    </script>

二、阻止表单多次提交

    <form action="javascript:;" method="post" name="myForm">
        <input type="text" autofocus>
        <br>
        <button type="submit" name="sub">提交</button>
    </form>

    <script>
        var form = document.forms["myForm"];
        var subBtn = form.elements["sub"];
        console.log(subBtn === form[1]);  // true

        // 防止多次提交
        form.addEventListener("submit", function () {
            subBtn.disabled = true;
        })
    </script>

三、文本框（input/textarea） change事件

    <form action="">
        <input type="text" name="num1" size="50" maxlength="10">
        <br>
        <input type="text" name="num2">
        <br>
        <textarea cols="20" rows="4">default value</textarea>
    </form>

    <script>
        var form = document.forms[0];

        form.elements[0].addEventListener("focus", handler);
        form.elements[1].addEventListener("focus", handler);
        form.elements[0].addEventListener("blur", handler);
        form.elements[1].addEventListener("blur", handler);
        form.elements[0].addEventListener("change", handler);
        form.elements[1].addEventListener("change", handler);

        function handler(even) {
            if(even.type == "focus"){
                if (even.target.style.backgroundColor != "red"){
                    even.target.style.backgroundColor = "yellow";
                }
            }else if(even.type == "blur"){
                if (even.target.style.backgroundColor != "red"){
                    even.target.style.backgroundColor = "";
                }
            }else if(even.type == "change"){
                if(/[^\d]/.test(even.target.value)){
                    even.target.style.backgroundColor = "red";
                }else{
                    even.target.style.backgroundColor = "";
                }
            }
        }
    </script>

四、文本框 select 事件及方法和操作剪切板

    <form action="">
        <input type="text" size="50" value="default value in input.">
        <br><br>
        <textarea cols="50" rows="10">default value in textarea.</textarea>
        <br><br>
        <input type="text" size="50" value="this is the last input.">
    </form>

    <script>
        var form = document.forms[0];
        var inp = form.elements[0];
        var tex = form.elements[1];
        var inp2 = form.elements[2];

        inp.addEventListener("focus", function (even) {
            // 方法 - 全选
            even.target.select();
        })

        inp2.addEventListener("focus", function (even) {
            // 方法 - 部分选择
            event.target.setSelectionRange(5, even.target.value.length);
        })

        tex.addEventListener("select", function (even) {
            // 事件 - select
            var content = event.target.value;
            console.log("selected value: " + content.substring(even.target.selectionStart, even.target.selectionEnd));
        })

        tex.addEventListener("keypress", function (even) {
            // 事件 - keypress
//            even.preventDefault();  // 可以阻止按键输入
            console.log(even.charCode + "--" + even.keyCode);
            console.log(String.fromCharCode(even.charCode));  // 获取按键值
            console.log(even.target.value); // 打印文本框值，不包含此次按键输入的值
        })

        tex.addEventListener("beforecopy", function () {
            console.log("事件 - 复制前");
        })
        tex.addEventListener("copy", function () {
            console.log("事件 - 复制");
        })
        tex.addEventListener("cut", function () {
            console.log("事件 - 剪切");
        })
        tex.addEventListener("paste", function () {
            console.log("事件 - 粘贴");
        })
    </script>