js文本框操作获取焦点禁用 for赋值全选等

妖狐艹你老母 2022-07-13 23:22 122阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            input {
                width: 300px;
                height: 36px;
                padding-left: 5px;
                color: #ccc;
            }
            label {
                position: absolute;
                top: 82px;
                left: 56px;
                font-size: 12px;
                color: #ccc;
                cursor: text;
            }
            .hide {
                display: none;
            }
            .show {
                display: block;
            }
        </style>
    </head>
    <body>
            京东:<input id="inp1" type="text" value="我是京东"/><br><br>
            淘宝:<label for="inp2">我是淘宝</label><input id="inp2" type="text"/><br><br>
            placeholder:<input type="text" placeholder="我是placeholder"/>
    <script>
    //------------------------文本框获取焦点-----------------------------
    
                //需求：京东的获取焦点。
                //思路：京东的input按钮获取了插入条光标立刻删除内容。失去插入条光标显示文字。
                //步骤：
                //1.获取事件源和相关元素
                //2.绑定事件
                //3.书写事件驱动程序
    
                //1.获取事件源和相关元素
                var inp1 = document.getElementById("inp1");
                //2.绑定事件(获取焦点事件onfocus)
                inp1.onfocus = function () {
                    //判断，如果input里面的内容是“我是京东”，那么把值赋值为“”；
                    if(this.value === "我是京东"){
                //                inp1.style.color = "#000";
                        inp1.value = "";
                    }
                }
                //(失去焦点事件)焦点：插入条光标onblur
                inp1.onblur = function () {
                    //失去焦点后判断，如果input内容为空，那么把内容赋值为我是京东。
                    if(this.value === ""){
                        //3.书写事件驱动程序
                //                inp1.style.color = "#ccc";
                        inp1.value = "我是京东";
                    }
                }
    
                //需求：淘宝的获取焦点。
                //思路：在input中输入文字，label标签隐藏，里面的文字变成空字符串，label显示。
                //步骤：
                //1.获取事件源和相关元素
                //2.绑定事件
                //3.书写事件驱动程序
    
                //1.获取事件源和相关元素
                var inp2 = document.getElementById("inp2");
                var lab = document.getElementsByTagName("label")[0];
                //2.绑定事件(输入事件，文字的输入和删除都会触动这个事件)
                //获取插入条光标
                //        inp2.focus();
                inp2.oninput = function () {
                    //3.书写事件驱动程序
                    //判断input中的值是否为空，如果为空，那么label显示，否则隐藏。
                    if(this.value === ""){
                        lab.className = "show";
                    }else{
                        lab.className = "hide";
                    }
                }
    
    
    //---------------------------禁用文本框----------------------------
    //            账号: <input type="text" value="传智你好..."/><button>禁用</button><button>解禁</button><br><br>
    //            密码: <input type="password" value="aaabbbccc"/>
    
                    //需求：禁用文本框
                    //步骤：
                    //1.获取事件源和相关元素
                    //2.绑定事件
                    //3.书写事件驱动程序
    
    
                    //1.获取事件源和相关元素
                    var inp = document.getElementsByTagName("input")[0];
                    var btn1 = document.getElementsByTagName("button")[0];
                    var btn2 = document.getElementsByTagName("button")[1];
                    //2.绑定事件
                    btn1.onclick = function () {
                        //3.书写事件驱动程序
                        inp.disabled = "no";
                    }
                    btn2.onclick = function () {
                        //3.书写事件驱动程序
                        inp.disabled = false;
                    //            inp.removeAttribute("disabled");
    }
    
    
    //-------------------------------for循环为文本框赋值-------------------
    //               <input type="text"/><br><br>
    //               <input type="text"/><br><br>
    //               <input type="text"/><br><br>
    //               <input type="text"/><br><br>
    //               <input type="text"/><br><br>
    //               <input type="text"/><br><br>
    //               <button>赋值</button><br><br>
    //               <button>取值</button><br><br>
    
                     //for循环赋值
                     //老三步
                     var inpArr = document.getElementsByTagName("input");
                     var btnArr = document.getElementsByTagName("button");
    
                     //赋值
                     btnArr[0].onclick = function () {
                         //循环为每一个input赋值
                         for(var i=0;i<inpArr.length;i++){
                             inpArr[i].value = i;
                         }
                     }
    
                     //获取值
                     btnArr[1].onclick = function () {
                         //循环获取nput的值赋值为一个数组
                         var newArr = [];
                         for(var i=0;i<inpArr.length;i++){
                             newArr.push(inpArr[i].value);
                         }
                         console.log(newArr.join(" "));
                       }
    
    
    //----------------------------文本框的全选和反选--------------------------
    //                         <style>
    //                         * {
    //                             padding: 0;
    //                        margin: 0;
    //                        }
    //                        .wrap {
    //                            width: 300px;
    //                            margin: 100px auto 0;
    //                        }
    //                        table {
    //                            border-collapse: collapse;
    //                            border-spacing: 0;
    //                            border: 1px solid #c0c0c0;
    //                            width: 300px;
    //                        }
    //                        th, td {
        //                        border: 1px solid #d0d0d0;
        //                        color: #404060;
        //                        padding: 10px;
    //                        }
    //                        th {
    //                            background-color: #09c;
    //                            font: bold 16px "微软雅黑";
    //                            color: #fff;
    //                        }
    //                        td {
    //                            font: 14px "微软雅黑";
    //                        }
    //                        tbody tr {
    //                            background-color: #f0f0f0;
    //                        }
    //                        tbody tr:hover {
    //                            cursor: pointer;
    //                            background-color: #fafafa;
    //                        }
    //                        </style>
    
                    window.onload = function () {
                        //需求1：点击上面的的input，下面全选或者反选。
                        //思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，如果是true，下面的全部变成true；false同理。
                        //老三步
                        var topInp = document.getElementById("theadInp");
                        var tbody = document.getElementById("tbody");
                        var botInpArr = tbody.getElementsByTagName("input");
    
                        //绑定事件
                        topInp.onclick = function () {
                            //牛劲版
                    //                for(var i=0;i<botInpArr.length;i++){
                    //                    if(topInp.checked === true){
                    //                        botInpArr[i].checked = true;
                    //                    }else{
                    //                        botInpArr[i].checked = false;
                    //                    }
                    //                }
                            //费劲版
                    //                    if(topInp.checked){
                    //                        for(var i=0;i<botInpArr.length;i++){
                    //                            botInpArr[i].checked = true;
                    //                        }
                    //                    }else{
                    //                        for(var i=0;i<botInpArr.length;i++){
                    //                            botInpArr[i].checked = false;
                    //                        }
                    //                    }
                            //优化版（被点击的input按钮的checked属性值，应该直接作为下面的所有的input按钮的checked属性值）
                            for(var i=0;i<botInpArr.length;i++){
                                botInpArr[i].checked = this.checked;
                            }
                        }
    
                        //需求2：点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。
                        //思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮
                        // checked属性值是否全部都是true，如果有一个是false，
                        // 那么上面的input的checked属性也是false;都是true，topInp的checked就是true；
    
                        //老三步
                        for(var i=0;i<botInpArr.length;i++){
                            botInpArr[i].onclick = function () {
                                //开闭原则
                                var bool = true;
                                //检测每一个input的checked属性值。
                                for(var j=0;j<botInpArr.length;j++){
                                    if(botInpArr[j].checked === false){
                                        bool = false;
                                    }
                                }
                                topInp.checked = bool;
                            }
                        }
                    }
    </script>
    </body>
    </html>