成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

AngularJS對(duì)動(dòng)態(tài)增加的DOM實(shí)現(xiàn)ng-keyup事件

Forelax / 909人閱讀

摘要：我在想這個(gè)是這么實(shí)現(xiàn)的想了一下有這么一個(gè)思路普通情況下這個(gè)是一個(gè)或元素，點(diǎn)擊之后變成一個(gè)元素，鼠標(biāo)離開則變回原元素。

我們經(jīng)常在網(wǎng)頁(yè)中看到這種形式的內(nèi)容，如圖：

用鼠標(biāo)點(diǎn)擊一下，就變成了一個(gè)input，如圖：

如果未輸入內(nèi)容，并且鼠標(biāo)離開后，則變回了原來(lái)的樣子；如果輸入了內(nèi)容，即使鼠標(biāo)離開，也保持內(nèi)容不變，此時(shí)輸入回車，則添加內(nèi)容，并清空輸入框。

我在想這個(gè)是這么實(shí)現(xiàn)的？想了一下有這么一個(gè)思路：普通情況下這個(gè)是一個(gè)div或p元素，點(diǎn)擊之后變成一個(gè)input元素，鼠標(biāo)離開則變回原元素。代碼（含詳細(xì)注釋版）如下：

window.onload = function () {
    // 頁(yè)面加載完給id為click-to-add的元素增加onclick方法
    document.getElementById("click-to-add").onclick = function () {
        // this在這個(gè)函數(shù)中就是id為click-to-add的元素，將其保存到變量non_input_type
        var non_input_type = this;
        // 新建一個(gè)input，保存到變量input_type
        var input_type = document.createElement("input");
        // 給input添加class和placeholder，這里我發(fā)現(xiàn)class對(duì)bootstrap有效
        input_type.setAttribute("placeholder", "添加待辦事項(xiàng)");
        input_type.className = "form-control";
        // 獲取父元素，然后父元素替換Child
        this.parentNode.replaceChild(input_type, non_input_type);
        // 設(shè)置焦點(diǎn)到input框中
        input_type.focus();
        // 當(dāng)input失去焦點(diǎn)，即鼠標(biāo)點(diǎn)到了別的地方
        input_type.onblur = function () {
        // 且input中沒(méi)有輸入內(nèi)容時(shí)
        if (input_type.value.length === 0){
            // 再替換回原來(lái)的對(duì)象
            input_type.parentNode.replaceChild(non_input_type, input_type);
            }
        }
    }
};

對(duì)應(yīng)的html代碼則很簡(jiǎn)單：

    

        

            +
            添加待辦事項(xiàng)

那么input怎么響應(yīng)回車呢？html自帶的onkeyup可以很容易做到，在此不演示，可以自行搜索。而在Angular中，可以給input增加ng-keyup來(lái)實(shí)現(xiàn)，這個(gè)本來(lái)也很簡(jiǎn)單，但在現(xiàn)在的這個(gè)問(wèn)題中，input不是一開始就有的，而是新生成的，直接使用ng-keyup并不起作用，Angular只會(huì)監(jiān)聽在頁(yè)面加載完時(shí)的ng方法，新增的則無(wú)效，要使新增的DOM也能響應(yīng)Angular方法，需要對(duì)其使用$compile方法，在前文this.parentNode.replaceChild(input_type, non_input_type);這句代碼之前增加以下兩行：

// 增加ng-keyup事件，對(duì)應(yīng)執(zhí)行send($event)這個(gè)函數(shù)
input_type.setAttribute("ng-keyup", "send($event)");
// 對(duì)input_type使用$compile方法
$compile(input_type)($scope);

接下來(lái)還要編寫send方法，如下：

$scope.send = function (e) {
    // 不同瀏覽器獲取按鍵代碼不一樣，有的是e.keyCode，有的是e.which
    var keycode = window.event?e.keyCode:e.which;
    // 回車對(duì)應(yīng)13
    if (keycode === 13){
        // e.targe就是對(duì)應(yīng)的DOM，這里獲取到value就按自己的需求去處理了
        alert("Add ToDo: " + e.target.value);
        e.target.value = "";
    }
}

演示如下，普通情況下是這樣的：

點(diǎn)擊后變成輸入框：

有內(nèi)容時(shí)，失去焦點(diǎn)也不會(huì)變，無(wú)內(nèi)容時(shí)則回到普通狀態(tài)，按下回車時(shí)，則alert內(nèi)容：

后來(lái)我又想了一下，只使用input就可以了，可以修改placeholder的顏色……
不過(guò)也是學(xué)習(xí)到了新姿勢(shì)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/93316.html

相關(guān)文章

  • AngularJs功能（六）--指令

    摘要：事件只針對(duì)輸入框值的真實(shí)修改，而不是通過(guò)來(lái)修改。指令將給定表達(dá)式的值替換元素的內(nèi)容。指令還有另外一種轉(zhuǎn)換方式，如果你有字符串?dāng)?shù)組希望在輸入框中顯示，你可以在上使用指令。 指令 Directive 指令系統(tǒng)（Directive）是Angular應(yīng)用的一個(gè)重要特性。 是通過(guò)對(duì)DOM元素的標(biāo)簽丶屬性來(lái)增強(qiáng)HTML表現(xiàn)力，為其增加一些特定功能。本篇參考文檔Angular菜鳥教程 內(nèi)置指令 這里...

    Mertens 評(píng)論0 收藏0

  • Regularjs是什么

    摘要：目前已經(jīng)在大大小小多個(gè)線上產(chǎn)品中使用了，也收集了一些有效的建議好了，該看下一個(gè)最簡(jiǎn)單的組件長(zhǎng)什么樣吧免費(fèi)領(lǐng)取驗(yàn)證碼內(nèi)容安全短信發(fā)送直播點(diǎn)播體驗(yàn)包及云服務(wù)器等套餐更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)分享請(qǐng)?jiān)L問(wèn)網(wǎng)易云社區(qū)。文章來(lái)源網(wǎng)易云社區(qū) 本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。 此文摘自regularjs的指南， 目前指南正在全面更新， 把老文檔的【接口/語(yǔ)法部分】統(tǒng)一放到了獨(dú)立的 Reference...

    seal_de 評(píng)論0 收藏0

  • 總結(jié)的AngularJS1版本的一些面試問(wèn)題

    摘要：綜上所述兩者是出于不同的目的被創(chuàng)建的，解決的也是不同的問(wèn)題。檢測(cè)模型變化的過(guò)程稱為循環(huán)。由指令注冊(cè)的事件處理函數(shù)執(zhí)行。該回調(diào)函數(shù)會(huì)更新插值表達(dá)式所在的屬性。模塊主要關(guān)系腳本加載問(wèn)題。 AngularJS面試題 1.與jQuery的比較 jQuery js函數(shù)庫(kù) 封裝簡(jiǎn)化dom操作 使用jquery的思想是：我擁有一個(gè)DOM元素并且想讓它去做某件事。也就是命令式編程思想。 angula...

    defcon 評(píng)論0 收藏0

  • vue面試

    摘要：雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器，當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，通過(guò)偵聽器最有用。路由的鉤子函數(shù)首頁(yè)可以控制導(dǎo)航跳轉(zhuǎn)，，等，一般用于頁(yè)面的修改。 談?wù)勀銓?duì)MVVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；View 代表UI視圖，負(fù)責(zé)數(shù)據(jù)的展示；...

    vspiders 評(píng)論0 收藏0

  • 前端面試題總結(jié)——VUE（持續(xù)更新中）

    摘要：前端面試題總結(jié)持續(xù)更新中是哪個(gè)組件的屬性模塊的組件。都提供合理的鉤子函數(shù)，可以讓開發(fā)者定制化地去處理需求。 前端面試題總結(jié)——VUE（持續(xù)更新中） 1.active-class是哪個(gè)組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？ 在 VueRouter 的參數(shù)中使用 children 配置，這樣就可以很好的實(shí)現(xiàn)路由嵌套。 //引入兩個(gè)組件 ...

    SimonMa 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Forelax

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<