AngularJS对动态增加的DOM实现ng-keyup事件示例
栏目: 编程语言 · JavaScript · 前端 · 发布时间: 6年前
内容简介：这篇文章主要介绍了AngularJS对动态增加的DOM实现ng-keyup事件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
我们经常在网页中看到这种形式的内容，如图：
用鼠标点击一下，就变成了一个input，如图：
如果未输入内容，并且鼠标离开后，则变回了原来的样子；如果输入了内容，即使鼠标离开，也保持内容不变，此时输入回车，则添加内容，并清空输入框。
我在想这个是这么实现的？想了一下有这么一个思路：普通情况下这个是一个div或p元素，点击之后变成一个input元素，鼠标离开则变回原元素。代码（含详细注释版）如下：
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);
}
}
}
};
对应的html代码则很简单：
<div>
<p id="click-to-add">
<span>+</span>
<span>添加待办事项</span>
</p>
</div>
那么input怎么响应回车呢？html自带的onkeyup可以很容易做到，在此不演示，可以自行搜索。而在Angular中，可以给input增加ng-keyup来实现，这个本来也很简单，但在现在的这个问题中，input不是一开始就有的，而是新生成的，直接使用ng-keyup并不起作用，Angular只会监听在页面加载完时的ng方法，新增的则无效，要使新增的DOM也能响应Angular方法，需要对其使用$compile方法，在前文this.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);
接下来还要编写send方法，如下：
$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 = "";
}
}
演示如下，普通情况下是这样的：
点击后变成输入框：
有内容时，失去焦点也不会变，无内容时则回到普通状态，按下回车时，则alert内容：
后来我又想了一下，只使用input就可以了，可以修改placeholder的颜色……
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Web之困：现代Web应用安全指南
(美)Michal Zalewski / 朱筱丹 / 机械工业出版社 / 2013-10 / 69
《web之困：现代web应用安全指南》在web安全领域有“圣经”的美誉，在世界范围内被安全工作者和web从业人员广为称道，由来自google chrome浏览器团队的世界顶级黑客、国际一流安全专家撰写，是目前唯一深度探索现代web浏览器安全技术的专著。本书从浏览器设计的角度切入，以探讨浏览器的各主要特性和由此衍生出来的各种安全相关问题为主线，深入剖析了现代web浏览器的技术原理、安全机制和设计上的......一起来看看 《Web之困：现代Web应用安全指南》 这本书的介绍吧!
