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 addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
JS 实现双色表格实现代码
Nov 24 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
在angular 6中使用 less 的实例代码
May 13 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 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
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
基于mysql的论坛(6)
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
php实现session共享的实例方法
2019/09/19 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python实现动态数组的示例代码
2019/07/15 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
售后主管岗位职责
2013/12/08 职场文书
需求分析说明书
2014/05/09 职场文书
森林防火标语
2014/06/23 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
房产授权委托书范本
2014/09/22 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android