Tab欄-編輯

來到項目最後的階段-編輯功能

整體思路為:

當雙擊文字時候，文字變成文本框，失去焦點以後，就把文本框的值賦值給元素。

首先，在獲取span( li裡放置文字的元素 )後，再點擊時就在span標籤生成一個input文本標籤，這裡pinkk老師的作法很簡單，直接將span.innerHTML=’<input type=" text " / > ’ ; ，這樣做也會讓span裡產生一個文本框，不同於以往還要creatElement後再appendChild等等繁瑣代碼。

     editTab() {
                 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                this.innerHTML = '<input type="text" />';
                          }

之後會發現這樣的代碼在雙擊文本框之後，最初的文字消失了，只有空白的文本框，有時客戶雙擊後又不想更改，此時需要維持原來的文字。
因此在雙擊span後先獲取span內的文本值，再將文字賦值給新增的input值中。
這裡可以用this.children[0] 然獲取到新增的input的value，新增的input永遠為span下的第一個子元素，注意!! 這段代碼要放到新增input之後才能獲取到。
在失去焦點後就將input內的文字賦值給元素，而在input內的this指向就變成input而非之前的span所以需要使用parentNode讓獲取文本。

 editTab() {
                var str = this.innerHTML;
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                this.innerHTML = '<input type="text" />';
                var input = this.children[0];
                input.value = str;
     			 input.onblur = function () {
                    this.parentNode.innerHTML = this.value;
                }           
                          }

最後的最後，就只是優化代碼給客戶更好得體驗

• 當用戶點擊input時自動將文本框內文字處於選中狀態
• 用戶要下確認鍵( enter )時也能把文本框的值給span，這裡只要手動調用失去文本框後調用的事件即可( input.blur(); )

 editTab() {
                var str = this.innerHTML;
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                this.innerHTML = '<input type="text" />';
                var input = this.children[0];
                input.value = str;
                input.select();
                input.onblur = function () {
                    this.parentNode.innerHTML = this.value;
                }
                input.onkeyup = function (e) {
                    if (e.keyCode === 13) {
                        input.blur();
                    }
                }

            }
        

以下代碼代表，無法選取網頁中的文字。但是只是無法選中，雙擊還是會閃爍因選取而出現的選取藍框

   window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

最終代碼:

<style>
    @font-face {
        font-family: "iconfont";
        src: url('./iconfont/iconfont.eot?t=1553960438096');
        /* IE9 */
        src: url('./iconfont/iconfont.eot?t=1553960438096#iefix') format('embedded-opentype'),
            /* IE6-IE8 */
            url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmwAAAJrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp4fwE2AiQDCAsGAAQgBYRtBzAbpQXIrrApw71oi3CCOyzEy8RvE4yIN8TD036/zp03qCYRjaJZNBFFS/gREoRGipQKofjuNrb+9XbTqrmXcqWzfTRDqFqWkhAJzYToaE6LQ7Q30CirRqSKMnj58DdIdrNAdhoTQJa5VGfLrtiAy+lPoAcZdUC57UljTR4TMAo4oL0xiqwYG8YueIHPCdTqYajty/t+bUpmrwvEnUK42lQhLMssVy1UNhzN4kmF6vSQVvMY/T5+HEU1SUXBbti7uBBrx++cgqJULp0GhAgBna5AgSkgE0eN6R1NwTitNt0yAI5VG7wr/8AljmoX7K+zq+tBF1Q8k9JTPWp1AjnJDgCzmM3bU0V31dsvV3M2eC6fHjaGfX/qS7U5Gr58vj6uD0bgxudyrV/OtHHyP+NZnpO1txbktjdY+3FB61+7nxeOzq8niGYnRwT3v3aZxeXf6rrNxl5//49WlEtZUUL1Pj3Bv1EO7MuG2namrCkbvcnApLUJtWpRhv2tzlRLx43kQ7WO2/FW6c5QqDZEZnYKFeosoVK1NdSa5E/XaVM1Ra7BhAEQmk0kjV5QaLbIzG5U6HRRqTkK1DqJtivrjMT1zJaNnIsihAiyQE3JdbszcW0Xiadzdl4d8UO0HSUGNDNXzl2hifYSO5pPjrorgdjUAAavoa5TKDZVUXD3kuuOOzh70fShvUiN2owtNsRxIREIIiATUCYpGO2aqXy/CxEeHcfuaKrLDiGbQ5kcEMsNIK8M5qCmR3mn8RFHOpcECBtlAAwWIZ2OAqV5kQoJXHvShORYBzrDZKhhb3uT8QPlrA3bmsKZV6i89DiTV2o1AAAA') format('woff2'),
            url('./iconfont/iconfont.woff?t=1553960438096') format('woff'),
            url('./iconfont/iconfont.ttf?t=1553960438096') format('truetype'),
            /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url('./iconfont/iconfont.svg?t=1553960438096#iconfont') format('svg');
        /* iOS 4.1- */
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-guanbi:before {
        content: "\e676";
    }

    * {
        margin: 0;
        padding: 0;
    }

    ul li {
        list-style: none;
    }

    main {
        width: 960px;
        height: 500px;
        border-radius: 10px;
        margin: 50px auto;
    }

    main h4 {
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .tabsbox {
        width: 900px;
        margin: 0 auto;
        height: 400px;
        border: 1px solid lightsalmon;
        position: relative;
    }

    nav ul {
        overflow: hidden;
    }

    nav ul li {
        float: left;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-right: 1px solid #ccc;
        position: relative;
    }

    nav ul li.liactive {
        border-bottom: 2px solid #fff;
        z-index: 9;
    }

    #tab input {
        width: 80%;
        height: 60%;
    }

    nav ul li span:last-child {
        position: absolute;
        user-select: none;
        font-size: 12px;
        top: -18px;
        right: 0;
        display: inline-block;
        height: 20px;
    }

    .tabadd {
        position: absolute;
        /* width: 100px; */
        top: 0;
        right: 0;
    }

    .tabadd span {
        display: block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #ccc;
        float: right;
        margin: 10px;
        user-select: none;
    }

    .tabscon {
        width: 100%;
        height: 300px;
        position: absolute;
        padding: 30px;
        top: 50px;
        left: 0px;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
    }

    .tabscon section,
    .tabscon section.conactive {
        display: none;
        width: 100%;
        height: 100%;
    }

    .tabscon section.conactive {
        display: block;
    }
</style>

<body>

    <main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>

            <!-- tab 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>

    <script>
        var lis = document.querySelectorAll('li')
        var a = document.querySelector('.liactive')
        console.log(document.querySelector('.liactive'));

        var that;

        

        class Tab {
            constructor(id) {
                that = this;
                this.main = document.querySelector(id);
                this.lis = this.main.querySelectorAll('li');
                this.section = this.main.querySelectorAll('section');
                this.ul = this.main.querySelector('.fisrstnav ul');
                this.add = this.main.querySelector('.tabadd');
                this.fsection = this.main.querySelector('.tabscon');
                this.init();
            }
            init() {
                this.updateNode();
                this.add.onclick = this.addTab;

                for (var i = 0; i < this.lis.length; i++) {
                    this.lis[i].index = i;
                    this.lis[i].onclick = this.toggleTab;
                    this.remove[i].onclick = this.removeTab;
                    this.span[i].ondblclick = this.editTab;

                    this.section[i].ondblclick = this.editTab;
                }
            }
            updateNode() {
                this.remove = this.main.querySelectorAll('.icon-guanbi')
                this.lis = this.main.querySelectorAll('li');
                this.section = this.main.querySelectorAll('section');
                this.span = this.main.querySelectorAll('.fisrstnav li span:first-child')
            }
            toggleTab() {
                that.clear()
                this.className = 'liactive';
                that.section[this.index].className = 'conactive';
            }
            clear() {
                for (var i = 0; i < this.lis.length; i++) {
                    this.lis[i].className = '';
                    this.section[i].className = '';

                }
            }
            addTab() {
                that.clear()
                var radom = Math.random()
                var li = '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>'
                var section = '<section class="conactive">測試' + radom + '</section > '
                that.ul.insertAdjacentHTML('beforeend', li)
                that.fsection.insertAdjacentHTML('beforeend', section)
                that.init();
            }
            removeTab(e) {
                e.stopPropagation();
                var index = this.parentNode.index;
                console.log(index);
                that.lis[index].remove();
                that.section[index].remove();
                that.init();
                if (document.querySelector('.liactive')) return;
                index==0? index=0 :index--;
                that.lis[index] && that.lis[index].click();
            }
            editTab() {
                var str = this.innerHTML;
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                this.innerHTML = '<input type="text" />';
                var input = this.children[0];
                input.value = str;
                input.select();
                input.onblur = function () {
                    this.parentNode.innerHTML = this.value;
                }
                input.onkeyup = function (e) {
                    if (e.keyCode === 13) {
                        input.blur();
                    }
                }

            }
        }

以上!!! 終於完成筆記，望持之以恆!