快捷導(dǎo)航

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

更新時(shí)間：2018年03月12日 10:31:10 作者：Harpsichord1207

這篇文章主要介紹了AngularJS對動(dòng)態(tài)增加的DOM實(shí)現(xiàn)ng-keyup事件示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

如果未輸入內(nèi)容，并且鼠標(biāo)離開后，則變回了原來的樣子；如果輸入了內(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 () {
  // 頁面加載完給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對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中沒有輸入內(nèi)容時(shí)
    if (input_type.value.length === 0){
      // 再替換回原來的對象
      input_type.parentNode.replaceChild(non_input_type, input_type);
      }
    }
  }
};

對應(yīng)的html代碼則很簡單：

  <div>
    <p id="click-to-add">
      <span>+</span>
      <span>添加待辦事項(xiàng)</span>
    </p>
  </div>

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

// 增加ng-keyup事件，對應(yīng)執(zhí)行send($event)這個(gè)函數(shù)
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;
  // 回車對應(yīng)13
  if (keycode === 13){
    // e.targe就是對應(yīng)的DOM，這里獲取到value就按自己的需求去處理了
    alert("Add ToDo: " + e.target.value);
    e.target.value = "";
  }
}

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