Heim >Backend-Entwicklung >PHP-Tutorial >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? html
Das 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, alert
Inhalt:
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!