AngularJS DOM implementiert das ng-keyup-Ereignis

Dieser Artikel stellt Ihnen hauptsächlich das Beispiel der Implementierung des ng-keyup-Ereignisses für dynamisch hinzugefügtes DOM vor. Ich werde es jetzt mit Ihnen teilen und Ihnen hoffentlich helfen .

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

Klicken Sie mit der Maus und es wird ein input, wie im Bild gezeigt:

Wenn kein Inhalt eingegeben wird und die Maus geht, kehrt sie zu ihrem ursprünglichen Aussehen zurück, auch wenn der Inhalt eingegeben wird Lassen Sie die Maus los, lassen Sie den Inhalt unverändert und drücken Sie die Eingabetaste, um den Inhalt hinzuzufügen und das Eingabefeld zu leeren.

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>

Wie reagiert input auf Wagenrücklauf? 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, als 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 ist es so:

Nachher Wenn Sie darauf klicken, wird es zu einem Eingabefeld:

Wenn Inhalt vorhanden ist, ändert sich der Fokus nicht. Wenn kein Inhalt vorhanden ist, kehrt er in den Normalzustand zurück . Wenn die Eingabetaste gedrückt wird, alertInhalt:

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

Das obige ist der detaillierte Inhalt vonAngularJS DOM implementiert das ng-keyup-Ereignis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!