AngularJS implementiert ein ng-keyup-Ereignisbeispiel für dynamisch vergrößertes DOM

In diesem Artikel wird hauptsächlich das Beispiel der Implementierung des ng-keyup-Ereignisses für dynamisch hinzugefügtes DOM vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Diese Form von Inhalten sehen wir oft auf Webseiten, wie im Bild gezeigt:

Klicken Sie mit der Maus und es wird ein input , wie in der Abbildung gezeigt:

Wenn kein Inhalt eingegeben wird und die Maus geht, kehrt sie zu ihrem ursprünglichen Aussehen zurück, wenn Inhalt eingegeben wird, bleibt der Inhalt unverändert, auch wenn Wenn Sie die Eingabetaste drücken, wird der Inhalt hinzugefügt und das Eingabefeld gelöscht.

Ich habe mich gefragt, wie das erreicht wird? Nachdem ich eine Weile darüber nachgedacht hatte, kam ich auf die Idee: Unter normalen Umständen ist dies ein p- oder p-Element. Nach dem Klicken wird es zu einem input-Element, und wenn die Maus weggeht, ändert es sich zurück zum ursprünglichen Element. Der Code ( inklusive detaillierter kommentierter Version ) lautet wie folgt:

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

Der entsprechende html-Code ist sehr einfach:

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

Also input wie soll ich auf den Wagenrücklauf reagieren? htmlDas eingebaute onkeyup kann einfach durchgeführt werden. Ich werde es hier nicht demonstrieren. Sie können es selbst suchen. In Angular können Sie input zu ng-keyup hinzufügen, um dies zu erreichen. Dies ist ursprünglich sehr einfach, aber im aktuellen Problem ist input nicht von Anfang an vorhanden, sondern wird direkt mit ng-keyup generiert funktioniert nicht. Angular hört nur auf die ng-Methode, wenn die Seite geladen wird. Damit die neu hinzugefügten DOM auch auf die Angular-Methode reagieren, müssen Sie sie verwenden die $compile-Methode und fügt die folgenden zwei Zeilen vor dem vorherigen this.parentNode.replaceChild(input_type, non_input_type);-Code hinzu:

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

Als nächstes müssen wir die send-Methode schreiben, Wie folgt:

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

Die Demonstration ist wie folgt, unter normalen Umständen sieht es so aus:

Nach dem Klicken wird es zum Eingabefeld:

Wenn Inhalt vorhanden ist, ändert sich der Fokus nicht, wenn er den Fokus verliert, kehrt er zum Normalzustand zurück Beim Drücken der Eingabetaste wurde der alert-Inhalt angezeigt:

Dann habe ich noch einmal darüber nachgedacht und beschlossen, einfach input zu verwenden und die Farbe von placeholder zu ändern. ..

oben habe ich es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Zwei Möglichkeiten für die Vue-Einzelseitenanwendung, auf separate Stildateien zu verweisen

Angular4 Shared Service in Beispiele für die Datenkommunikation in mehreren Komponenten

Basierend auf der Speicherung von Schlüssel-Wert-Paaren in js und der Einführung von Vorsichtsmaßnahmen

Das obige ist der detaillierte Inhalt vonAngularJS implementiert ein ng-keyup-Ereignisbeispiel für dynamisch vergrößertes DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!