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

Forelax 发布于2019-08-22 15:16 / 860人阅读

摘要：我在想这个是这么实现的想了一下有这么一个思路普通情况下这个是一个或元素，点击之后变成一个元素，鼠标离开则变回原元素。

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

用鼠标点击一下，就变成了一个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代码则很简单：

那么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的颜色……
不过也是学习到了新姿势。

GPU云服务器云服务器 DOM事件 dom事件管理 dom事件冒泡 DOM元素事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93316.html

AngularJs功能（六）--指令

摘要：事件只针对输入框值的真实修改，而不是通过来修改。指令将给定表达式的值替换元素的内容。指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在上使用指令。指令 Directive 指令系统（Directive）是Angular应用的一个重要特性。是通过对DOM元素的标签丶属性来增强HTML表现力，为其增加一些特定功能。本篇参考文档Angular菜鸟教程内置指令这里...

Mertens 2019-08-22 13:59 评论0 收藏0
Regularjs是什么

摘要：目前已经在大大小小多个线上产品中使用了，也收集了一些有效的建议好了，该看下一个最简单的组件长什么样吧免费领取验证码内容安全短信发送直播点播体验包及云服务器等套餐更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区本文由作者郑海波授权网易云社区发布。此文摘自regularjs的指南，目前指南正在全面更新，把老文档的【接口/语法部分】统一放到了独立的 Reference...

seal_de 2019-06-28 11:09 评论0 收藏0
总结的AngularJS1版本的一些面试问题

摘要：综上所述两者是出于不同的目的被创建的，解决的也是不同的问题。检测模型变化的过程称为循环。由指令注册的事件处理函数执行。该回调函数会更新插值表达式所在的属性。模块主要关系脚本加载问题。 AngularJS面试题 1.与jQuery的比较 jQuery js函数库封装简化dom操作使用jquery的思想是：我拥有一个DOM元素并且想让它去做某件事。也就是命令式编程思想。 angula...

defcon 2019-08-21 16:18 评论0 收藏0
vue面试

摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，通过侦听器最有用。路由的钩子函数首页可以控制导航跳转，，等，一般用于页面的修改。谈谈你对MVVM开发模式的理解 MVVM分为Model、View、ViewModel三者。Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；...

vspiders 2019-08-23 18:38 评论0 收藏0
前端面试题总结——VUE（持续更新中）

摘要：前端面试题总结持续更新中是哪个组件的属性模块的组件。都提供合理的钩子函数，可以让开发者定制化地去处理需求。前端面试题总结——VUE（持续更新中） 1.active-class是哪个组件的属性？ vue-router模块的router-link组件。 2.嵌套路由怎么定义？在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 //引入两个组件 ...

SimonMa 2019-08-22 16:08 评论0 收藏0