AngularJS DOM implements ng-keyup event

This article mainly introduces to you the example of AngularJS implementing ng-keyup event for dynamically added DOM. The editor thinks it is quite good. Now I will share it with you and give you a reference. I hope it can help you.

We often see this form of content on web pages, as shown in the picture:

Click with the mouse and it will become a input, as shown in the figure:

If no content is entered and the mouse leaves, it will return to its original appearance; if content is entered, even if When the mouse leaves, the content remains unchanged. If you press Enter, the content will be added and the input box will be cleared.

I'm thinking this is how this is achieved? After thinking about it for a while, I came up with this idea: Under normal circumstances, this is a p or p element. After clicking, it turns into an input element. When the mouse leaves, it changes back to original element. The code ( including detailed annotated version ) is as follows:

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);
      }
    }
  }
};

The corresponding code for html is very simple:

  <p>
    <p id="click-to-add">
      <span>+</span>
      <span>添加待办事项</span>
    </p>
  </p>

So how does input respond to the carriage return? htmlThe built-in onkeyup can be easily done. It is not demonstrated here. You can search by yourself. In Angular, you can add ng-keyup to input to achieve this. This is originally very simple, but in the current problem, The input is not there from the beginning, but is newly generated. Using ng-keyup directly does not work. Angular will only listen to the # when the page is loaded. ##ng method, the new one is invalid. To make the new DOM also respond to the Angular method, you need to use $compile Method, add the following two lines before the previous code 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);

The next step is Write the

send method as follows:

$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 = "";
  }
}

The demonstration is as follows, under normal circumstances it looks like this:

After clicking, it becomes an input box:

When there is content, the focus will not change if there is no content. When there is no content, it will return to the normal state. When pressing Enter , then

alert content:

Later I thought about it again, just use

input and it can be modified ## The color of #placeholder…

The above is the detailed content of AngularJS DOM implements ng-keyup event. For more information, please follow other related articles on the PHP Chinese website!