AngularJS之DOM实现ng-keyup事件
本文主要和大家介绍了AngularJS对动态增加的DOM实现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
的颜色……
Atas ialah kandungan terperinci AngularJS之DOM实现ng-keyup事件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.

Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut

Penggunaan: Dalam JavaScript, kaedah insertBefore() digunakan untuk memasukkan nod baharu dalam pepohon DOM. Kaedah ini memerlukan dua parameter: nod baharu untuk dimasukkan dan nod rujukan (iaitu nod di mana nod baharu akan dimasukkan).
