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 키를 누르면 알림 콘텐츠가 표시됩니다: 🎜🎜🎜🎜그러다가 다시 생각해 보니 입력을 사용하고 자리 표시자...🎜

위 내용은 AngularJS DOM은 ng-keyup 이벤트를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!