AngularJS對動態增加的DOM實現ng-keyup事件

Forelax 發布于2019-08-22 15:16 / 867人閱讀

摘要：我在想這個是這么實現的想了一下有這么一個思路普通情況下這個是一個或元素，點擊之后變成一個元素，鼠標離開則變回原元素。

我們經常在網頁中看到這種形式的內容，如圖：

用鼠標點擊一下，就變成了一個input，如圖：

如果未輸入內容，并且鼠標離開后，則變回了原來的樣子；如果輸入了內容，即使鼠標離開，也保持內容不變，此時輸入回車，則添加內容，并清空輸入框。

我在想這個是這么實現的？想了一下有這么一個思路：普通情況下這個是一個div或p元素，點擊之后變成一個input元素，鼠標離開則變回原元素。代碼（含詳細注釋版）如下：

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

對應的html代碼則很簡單：

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

// 增加ng-keyup事件，對應執行send($event)這個函數
input_type.setAttribute("ng-keyup", "send($event)");
// 對input_type使用$compile方法
$compile(input_type)($scope);

接下來還要編寫send方法，如下：

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

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

點擊后變成輸入框：

有內容時，失去焦點也不會變，無內容時則回到普通狀態，按下回車時，則alert內容：

后來我又想了一下，只使用input就可以了，可以修改placeholder的顏色……
不過也是學習到了新姿勢。

GPU云服務器云服務器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93316.html

AngularJs功能（六）--指令

摘要：事件只針對輸入框值的真實修改，而不是通過來修改。指令將給定表達式的值替換元素的內容。指令還有另外一種轉換方式，如果你有字符串數組希望在輸入框中顯示，你可以在上使用指令。指令 Directive 指令系統（Directive）是Angular應用的一個重要特性。是通過對DOM元素的標簽丶屬性來增強HTML表現力，為其增加一些特定功能。本篇參考文檔Angular菜鳥教程內置指令這里...

Mertens 2019-08-22 13:59 評論0 收藏0
Regularjs是什么

摘要：目前已經在大大小小多個線上產品中使用了，也收集了一些有效的建議好了，該看下一個最簡單的組件長什么樣吧免費領取驗證碼內容安全短信發送直播點播體驗包及云服務器等套餐更多網易技術產品運營經驗分享請訪問網易云社區。文章來源網易云社區本文由作者鄭海波授權網易云社區發布。此文摘自regularjs的指南，目前指南正在全面更新，把老文檔的【接口/語法部分】統一放到了獨立的 Reference...

seal_de 2019-06-28 11:09 評論0 收藏0
總結的AngularJS1版本的一些面試問題

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

defcon 2019-08-21 16:18 評論0 收藏0
vue面試

摘要：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數據變化時執行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數首頁可以控制導航跳轉，，等，一般用于頁面的修改。談談你對MVVM開發模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數據模型，數據和業務邏輯都在Model層中定義；View 代表UI視圖，負責數據的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
前端面試題總結——VUE（持續更新中）

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

SimonMa 2019-08-22 16:08 評論0 收藏0