分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了AngularJS对动态增加的DOM实现ng-keyup事件示例，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我们经常在网页中看到这种形式的内容，如图：

AngularJS对动态增加的DOM实现ng-keyup事件示例

用鼠标点击一下，就变成了一个input，如图：

AngularJS对动态增加的DOM实现ng-keyup事件示例

如果未输入内容，并且鼠标离开后，则变回了原来的样子；如果输入了内容，即使鼠标离开，也保持内容不变，此时输入回车，则添加内容，并清空输入框。

我在想这个是这么实现的？想了一下有这么一个思路：普通情况下这个是一个div或p元素，点击之后变成一个input元素，鼠标离开则变回原元素。代码（含详细注释版）如下：

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

对应的html代码则很简单：

+ 添加待办事项

那么input怎么响应回车呢？html自带的onkeyup可以很容易做到，在此不演示，可以自行搜索。而在Angular中，可以给input增加ng-keyup来实现，这个本来也很简单，但在现在的这个问题中，input不是一开始就有的，而是新生成的，直接使用ng-keyup并不起作用，Angular只会监听在页面加载完时的ng方法，新增的则无效，要使新增的DOM也能响应Angular方法，需要对其使用$compile方法，在前文this.parentNode.replaceChild(input_type,non_input_typE);这句代码之前增加以下两行：

); // 对input_type使用$compile方法 $compile(input_typE)($scopE);

接下来还要编写send方法，如下：

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

演示如下，普通情况下是这样的：

AngularJS对动态增加的DOM实现ng-keyup事件示例