AngularJS DOM implémente l'événement ng-keyup

Cet article vous présente principalement l'exemple d'AngularJS implémentant l'événement ng-keyup pour le DOM ajouté dynamiquement. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et vous donner une référence, j'espère que cela pourra vous aider. .

Nous voyons souvent cette forme de contenu sur les pages Web, comme le montre l'image :

Cliquez avec la souris et cela devient un input, comme le montre l'image :

Si aucun contenu n'est saisi et que la souris quitte, elle retrouvera son apparence d'origine si du contenu est saisi, même si le contenu est saisi ; la souris quitte, conservez le contenu inchangé et appuyez sur Entrée pour ajouter le contenu et effacer la zone de saisie.

Je me demandais comment cela était réalisé ? Après y avoir réfléchi un moment, j'ai eu cette idée : dans des circonstances normales, c'est un élément p ou p Après avoir cliqué, il devient un élément input, et lorsque la souris s'en va, il change. retour à l'élément d'origine. Le code ( incluant la version annotée détaillée ) est le suivant :

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);
      }
    }
  }
};

Le html code correspondant est très simple :

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

Alors, comment input répond-il à Entrée ? htmlLe onkeyup intégré peut être facilement réalisé. Je ne le démontrerai pas ici. Vous pouvez le rechercher vous-même. Dans Angular, vous pouvez ajouter input à ng-keyup pour y parvenir. C'est à l'origine très simple, mais dans le problème actuel, input n'est pas là depuis le début, mais nouvellement généré, directement en utilisant ng-keyup. ne fonctionne pas. Angular n'écoutera la méthode ng que lorsque la page est chargée. Les nouvelles seront invalides. Pour que le DOM nouvellement ajouté réponde également à la méthode Angular, vous devez l'utiliser. la méthode $compile et ajoute les deux lignes suivantes avant le code this.parentNode.replaceChild(input_type, non_input_type); précédent :

// 增加ng-keyup事件，对应执行send($event)这个函数
input_type.setAttribute("ng-keyup", "send($event)");
// 对input_type使用$compile方法
$compile(input_type)($scope);

Ensuite, nous devons écrire la méthode send, comme suit :

$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 = "";
  }
}

La démonstration est la suivante, en temps normal c'est comme ça :

Après cliquez, cela devient une zone de saisie :

Quand il y a du contenu, le focus ne changera pas lorsqu'il perd le focus. Lorsqu'il n'y a pas de contenu, il revient à l'état normal. . Lorsque vous appuyez sur Entrée, alertContenu :

Ensuite, j'y ai repensé et j'ai décidé d'utiliser simplement input et de modifier la couleur de placeholder. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!