이 글에서는 동적으로 추가된 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
그렇다면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!