文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何使用AngularJS对动态增加的DOM实现ng-keyup事件

2024-04-02 19:55

关注

这篇文章将为大家详细讲解有关如何使用AngularJS对动态增加的DOM实现ng-keyup事件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

如何使用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的颜色……

关于“如何使用AngularJS对动态增加的DOM实现ng-keyup事件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯