热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了AngularJS对动态增加的DOM实现ng-keyup事件示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

我在想这个是这么实现的?想了一下有这么一个思路:普通情况下这个是一个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代码则很简单:

  

+ 添加待办事项

那么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的颜色……

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


推荐阅读
  • Bootstrap 支持用户自定义样式调整。即使长时间未使用 Bootstrap,也可以通过添加新的 CSS 类或覆盖现有类来轻松修改默认样式,以满足特定的设计需求。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • A*算法在AI路径规划中的应用
    路径规划算法用于在地图上找到从起点到终点的最佳路径,特别是在存在障碍物的情况下。A*算法是一种高效且广泛使用的路径规划算法,适用于静态和动态环境。 ... [详细]
  • 短暂的人生中,IT和技术只是其中的一部分。无论换工作还是换行业,最终的目标是成功、荣誉和收获。本文探讨了技术人员如何跳出纯技术的局限,实现更大的职业发展。 ... [详细]
  • NX二次开发:UFUN点收集器UF_UI_select_point_collection详解
    本文介绍了如何在NX中使用UFUN库进行点收集器的二次开发,包括必要的头文件包含、初始化和选择点集合的具体实现。 ... [详细]
  • 解决SQL Server数据库sa登录名无法连接的问题
    在安装SQL Server数据库后,使用Windows身份验证成功,但使用SQL Server身份验证时遇到问题。本文将介绍如何通过设置sa登录名的密码、启用登录名状态以及开启TCP协议来解决这一问题。 ... [详细]
  • MySQL 数据库连接方法
    本文介绍了如何使用 MySQL 命令行工具连接到指定的数据库。 ... [详细]
  • 如何解决8080端口被占用问题
    本文介绍了如何通过命令行和任务管理器查找并终止占用8080端口的进程,以确保该端口能够正常使用。 ... [详细]
  • HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送www方式的数据。HTTP协议采用了请求响应模型。客服端向服务器发送一 ... [详细]
  • 本文详细介绍了 HTML 中 a 标签的 href 属性的多种用法,包括实现超链接、锚点以及调用 JavaScript 方法。通过具体的示例和解释,帮助开发者更好地理解和应用这些技术。 ... [详细]
  • Excel 数据分析基础
    Excel 是数据分析中最基本且强大的工具之一,具备多种实用功能和操作方法。本文将简要介绍 Excel 的不同版本及其兼容性问题,并探讨在处理大数据时的替代方案。 ... [详细]
  • 机器学习算法:SVM(支持向量机)
    SVM算法(SupportVectorMachine,支持向量机)的核心思想有2点:1、如果数据线性可分,那么基于最大间隔的方式来确定超平面,以确保全局最优, ... [详细]
  • 为什么多数程序员难以成为架构师?
    探讨80%的程序员为何难以晋升为架构师,涉及技术深度、经验积累和综合能力等方面。本文将详细解析Tomcat的配置和服务组件,帮助读者理解其内部机制。 ... [详细]
  • Ubuntu18.04下无法进入图形界面、无法调整分辨率、无法重装显卡驱动问题的解决方式参考文章:(1)Ubuntu18.04下无法进入 ... [详细]
  • Ext JS MVC系列一:环境搭建与框架概览
    本文主要介绍了如何在项目中使用Ext JS 4作为前端框架,并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ... [详细]
author-avatar
单纯只是一2502904797
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有