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


Posted in Javascript onMarch 12, 2018

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

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

用鼠标点击一下,就变成了一个input,如图:

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

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

我在想这个是这么实现的?想了一下有这么一个思路:普通情况下这个是一个divp元素,点击之后变成一个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 = "";
  }
}

演示如下,普通情况下是这样的:

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

点击后变成输入框:

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

有内容时,失去焦点也不会变,无内容时则回到普通状态,按下回车时,则alert内容:

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

后来我又想了一下,只使用input就可以了,可以修改placeholder的颜色……

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
jquery tools之tooltip
Jul 25 Javascript
取选中的radio的值
Jan 11 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 Javascript
vue路由懒加载的实现方法
Mar 12 #Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 #Javascript
详解vuex的简单使用
Mar 12 #Javascript
js提取中文拼音首字母的封装工具类
Mar 12 #Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 #Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 #Javascript
javascript变量提升和闭包理解
Mar 12 #Javascript
You might like
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
JavaScript Accessor实现说明
2010/12/06 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
17个Python小技巧分享
2015/01/23 Python
python访问系统环境变量的方法
2015/04/29 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
python3多线程知识点总结
2019/09/26 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
师范生实习的个人自我鉴定
2013/10/20 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2014年防汛工作总结
2014/12/08 职场文书
八月迷情观后感
2015/06/11 职场文书
2016教师读书思廉心得体会
2016/01/23 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle