[英]How to operate checkbox with keydown property?
我想在按下輸入時勾選復選框，並且在按下退格復選框后，輸出應該同樣顯示在行標記中，並且元素必須從行中刪除。 但我該怎么做？ 不使用 jquery。
for (i = 301; i < 359; i++) { document.write("<input type='checkbox' value='" + i + "' onkeydown='absent(this)'>" + i + "<br>"); } function absent(e) { if (event.key == "Enter") { e.checked = true; document.getElementById("dis").innerHTML += " " + e.value; } if (e.key == "Backspace") { e.checked = false; var x = document.getElementById("dis").innerHTML; var m = x.replace(e.value, "") document.getElementById("dis").innerHTML = m; } }
li { max-width: 800px; word-wrap: break-word; font-size: 27px; margin-left: 200px; color: blue; margin-top: 100px; } h1 { color: crimson; font-weight: 1000px; font-size: 60px; margin-left: 500px; ; }
<!DOCTYPE html> <html> <head> <title>Checkbox Attandance</title> </head> <body style="background-color: blanchedalmond;"> <h1>Attendance</h1> <li id="dis">Present Students<br></li><br> </body> </html>
添加|| event.key == "Delete" || event.key == "Delete"在你的if括號內，它會起作用
<!DOCTYPE html> <html> <head> <title>Checkbox Attandance</title> <style> li { max-width: 800px; word-wrap: break-word; font-size: 27px; margin-left: 200px; color: blue; margin-top: 100px; } h1{ color: crimson; font-weight: 1000px; font-size: 60px; margin-left: 500px;; } </style> </head> <body style="background-color: blanchedalmond;" > <h1>Attendance</h1> <li id="dis">Present Students<br></li><br> <script> for(i=301;i<359;i++){ document.write("<input type='checkbox' value='"+i+"' onkeydown='absent(this)'>"+i+"<br>"); } function absent(e){ if(event.key=="Enter"){ e.checked=true; document.getElementById("dis").innerHTML+=" "+e.value; } if(event.key === "Backspace" || event.key === "Delete"){ e.checked=false; var x=document.getElementById("dis").innerHTML; var m=x.replace(e.value,"") document.getElementById("dis").innerHTML=m; } } </script> </body> </html>
這是一個演示，您可以在其中導航（使用 Tab 鍵），重點是在初始化時創建的可用復選框。 懸停時的每個都會顯示相應的 id 和工具提示。
當您按下 Enter 時，它將勾選當前活動的復選框，並將在列表中添加一個新的列表項，對應於選中的復選框 id。 如果按del，它將取消選中復選框並刪除相應的列表項。
由於該操作是在具有焦點的復選框上執行的，因此刪除功能將僅對添加的最后一個復選框起作用。 如果需要，它可以很容易地變得更強大，但所選選項的順序將不再得到保證。
鍵盤將控制焦點，使您在復選框中旋轉。
const target = document.getElementById('target'); for(i=301;i<359;i++){ const o = document.createElement('input'); o.setAttribute('type','checkbox'); o.setAttribute('title',`id:${i}`); o.value = i; o.addEventListener('keydown', absent); o.addEventListener('click', (event)=>{event.preventDefault();}); target.append(o); } document.querySelector('#target input:first-child').focus(); function absent(e){ if(!e.target.checked && e.key=="Enter"){ const list = document.querySelector("#students ol.list"); const item = document.createElement('li'); item.innerText = e.target.value; list.append(item); e.target.checked = true; } if(e.target.checked && e.key=="Backspace"){ const lastItem = document.querySelector("#students ol.list li:last-child"); if(lastItem.innerText != e.target.value) return; lastItem.remove(); e.target.checked = false; } if(e.key=="Tab" && e.target.nextSibling == null) document.querySelector('#target input:first-child').focus(); }
body { background-color: blanchedalmond; } h1{ color: crimson; font-weight: 700; font-size: 60px; text-align: center; } h2 { color: blue; } #students{ margin: 0 2rem 1rem 2rem; padding: 0 20px; border: dashed 2px gray; } .list{ } #target{ margin: 0 2rem; padding: 20px; border: dashed 2px gray; } input[type=checkbox]{ cursor: pointer; }
<body> <h1>Attendance</h1> <div id="students" tabindex="-1"> <h2>Present Students</h2> <ol class="list"> </ol> </div> <div id="target"> </div> </body>
jQuery：從keydown調用click，但獲得正確的復選框選中屬性
[英]jQuery: calling click from keydown, but getting the correct checkbox checked property
如何在作為對象屬性的JavaScript函數生成器上進行操作
[英]How to operate on javascript function generator which is an object property
復選框上的keydown在FF中不會冒泡，但在IE中卻會冒泡。 怎么解決？
[英]keydown on checkbox doesn't bubble in FF, but it does in IE. How to solve?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.