AngularJS는 동적으로 증가된 DOM을 위해 ng-keyup 이벤트 예제를 구현합니다.

이 글에서는 동적으로 추가된 DOM에 대해 AngularJS에서 ng-keyup 이벤트를 구현하는 예제를 주로 소개합니다. 이제 참고용으로 공유하겠습니다.

그림과 같이 웹페이지에서 이런 형태의 콘텐츠를 자주 볼 수 있습니다.

마우스로 클릭하면 그림과 같이 입력이 됩니다. input，如图：

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

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

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

那么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

내용이 입력되지 않고 마우스가 나가면 내용을 입력하면 마우스가 나가도 내용은 그대로 유지됩니다. 이때 Enter를 입력하면 내용이 추가되고 입력란이 지워집니다.

이렇게 이루어지는 것 같은데? 잠시 고민한 끝에 이런 생각이 떠올랐습니다. 일반적인 상황에서는 p 또는 p 요소를 클릭하면 가 됩니다. input 요소와 마우스가 떠나면 원래 요소로 다시 변경됩니다. 코드(자세한 주석 포함)는 다음과 같습니다.

rrreee
해당 html 코드는 매우 간단합니다.

rrreee
그렇다면 input은 캐리지 리턴에 어떻게 반응할까요? html과 함께 제공되는 onkeyup은 여기서는 설명하지 않고 직접 검색할 수 있습니다. Angular에서는 input에 ng-keyup을 추가하여 이를 달성할 수 있습니다. 이는 원래 매우 간단하지만 현재 문제에서는 입니다. >input은 처음부터 존재하지 않지만, ng-keyup을 사용하여 직접 생성하면 Angular는 ng만 수신합니다. 페이지가 로드될 때 메소드가 유효하지 않습니다. 새로 추가된 DOM도 Angular 메소드에 응답하도록 하려면 $를 사용해야 합니다. compile 메소드를 실행하고 이전 코드 this.parentNode.replaceChild(input_type, non_input_type); 앞에 다음 두 줄을 추가합니다.

rrreee
다음 , 다음과 같이 send 메소드를 작성해야 합니다.

rrreee

데모는 일반적인 상황에서 다음과 같습니다.

🎜🎜클릭하면 입력 상자가 됩니다: 🎜🎜 🎜🎜콘텐츠가 있어도 포커스가 바뀌지 않습니다. 콘텐츠가 없으면 일반 상태로 돌아가 Enter 키를 누른 다음 알림 콘텐츠: 🎜🎜🎜🎜그러다가 다시 생각해 보니 입력을 사용하고 자리 표시자의 색상을 수정할 수 있습니다. ...🎜🎜 🎜위 내용은 앞으로 모든 분들께 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜Vue 단일 페이지 애플리케이션이 별도의 스타일 파일을 참조하는 두 가지 방법🎜🎜🎜🎜🎜angular4 여러 구성 요소의 공유 서비스 데이터 통신 예🎜🎜🎜🎜🎜js의 저장소 키 값 기반 권리소개 및 주의사항🎜🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 AngularJS는 동적으로 증가된 DOM을 위해 ng-keyup 이벤트 예제를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!