AngularJS对动态增加的DOM实现ng-keyup事件
我们经常在网页中看到这种形式的内容,如图:
用鼠标点击一下,就变成了一个
如果未输入内容,并且鼠标离开后,则变回了原来的样子;如果输入了内容,即使鼠标离开,也保持内容不变,此时输入回车,则添加内容,并清空输入框。 我在想这个是这么实现的?想了一下有这么一个思路:普通情况下这个是一个 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); } } } }; 对应的 <div> <p id="click-to-add"> <span>+</span> <span>添加待办事项</span> </p> </div> 那么 // 增加ng-keyup事件,对应执行send($event)这个函数 input_type.setAttribute("ng-keyup","send($event)"); // 对input_type使用$compile方法 $compile(input_type)($scope); 接下来还要编写 $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 = ""; } } 演示如下,普通情况下是这样的:
点击后变成输入框:
有内容时,失去焦点也不会变,无内容时则回到普通状态,按下回车时,则
后来我又想了一下,只使用 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |