AngularJS implements ng-keyup event example for dynamically increased DOM

This article mainly introduces the example of AngularJS implementing ng-keyup event for dynamically added DOM. Now I share it with you and give it as a reference.

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 the mouse leaves, Also keep the content unchanged. If you enter Enter at this time, 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 html code 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);

Continue Next, we need to 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 when the focus is lost. When there is no content, it will return to the normal state. , when pressing Enter, the

alert content:

Later I thought about it again and just use

input Now, you can modify the color of placeholder...

I compiled the above for you, I hope it will be helpful to you in the future.

Related articles:

Two ways for Vue single-page applications to reference separate style files

angular4 shared services in Example of data communication in multiple components

Based on the storage of key-value pairs in js and the introduction of precautions

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