[英]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.