AngularJS implements ng-keyup event example for dynamically increased DOM-JS Tutorial-php.cn

This article mainly introduces the example of AngularJS implementing ng-keyup event for dynamically added DOM. Now I share it with you and give it as a reference.

We often see this form of content on web pages, as shown in the picture:

Click with the mouse and it will become ainput, as shown in the figure:

If no content is entered and the mouse leaves, it will return to its original appearance; if content is entered, even if the mouse leaves, Also keep the content unchanged. If you enter Enter at this time, the content will be added and the input box will be cleared.

I’m thinking this is how this is achieved? After thinking about it for a while, I came up with this idea: Under normal circumstances, this is aporpelement. After clicking, it turns into aninputelement. When the mouse leaves, it changes back to original element. The code (including detailed annotated version) is as follows:

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

Copy after login

The correspondinghtmlcode is very simple:

+ 添加待办事项

Copy after login

So how doesinputrespond to the carriage return?htmlThe built-inonkeyupcan be easily done. It is not demonstrated here. You can search by yourself. InAngular, you can addng-keyuptoinputto achieve this. This is originally very simple, but in the current problem,The inputis not there from the beginning, but is newly generated. Usingng-keyupdirectly does not work.Angularwill only listen to the # when the page is loaded. ##ngmethod, the new one is invalid. To make the newDOMalso respond to theAngularmethod, you need to use$compileMethod, add the following two lines before the previous codethis.parentNode.replaceChild(input_type, non_input_type);:

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

Copy after login

Continue Next, we need to write the

sendmethod, as follows:

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

Copy after login

The demonstration is as follows. Under normal circumstances, it looks like this:

After clicking, it becomes an input box:

When there is content, the focus will not change when the focus is lost. When there is no content, it will return to the normal state. , when pressing Enter, the

alertcontent:

Later I thought about it again and just use

inputNow, you can modify the color ofplaceholder...

I compiled the above for you, I hope it will be helpful to you in the future.

Two ways for Vue single-page applications to reference separate style files

angular4 shared services in Example of data communication in multiple components

Based on the storage of key-value pairs in js and the introduction of precautions

The above is the detailed content of AngularJS implements ng-keyup event example for dynamically increased DOM. For more information, please follow other related articles on the PHP Chinese website!