AngularJS對動態增加的DOM實作ng-keyup事件範例

這篇文章主要介紹了AngularJS對動態增加的DOM實作ng-keyup事件範例，現在分享給大家，也給大家做個參考。

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

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

如果未輸入內容，並且滑鼠離開後，則變回了原來的樣子；如果輸入了內容，即使滑鼠離開，也保持內容不變，此時輸入回車，則新增內容，並清空輸入框。

我在想這個是這麼實現的？想了一下有這麼一個想法：普通情況下這個是一個p或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程式碼則很簡單：

  <p>
    <p id="click-to-add">
      <span>+</span>
      <span>添加待办事项</span>
    </p>
  </p>

那麼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的顏色……

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

Vue單頁應用引用單獨的樣式檔案的兩種方式

angular4 共享服務在多個元件中資料通訊的範例

基於js中的儲存鍵值對以及注意事項介紹

以上是AngularJS對動態增加的DOM實作ng-keyup事件範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！