JavaScript，按Enter键
[英]JavaScript, Pressing the enter key
问题描述
My JavaScript assignment is a ''to-do list', the user needs to be able to press the enter key, I tried this code but it's not working. 
我的JavaScript分配是“待办事项列表”，用户需要能够按Enter键，我尝试了此代码，但无法正常工作。 If anyone has suggestions please let me know! 如果有人有建议，请告诉我！ Thanks 谢谢
EDIT: Here is my JavaScript, HTML and CSS file 编辑：这是我的JavaScript，HTML和CSS文件
EDIT II: Here are the directions in full 1. After inserting a new item, clear the input field 2. If the user presses the enter key, perform the same action as clicking the plus button. 编辑II：这是完整的说明。1.插入新项目后，清除输入字段。2.如果用户按Enter键，则执行与单击加号按钮相同的操作。 3. Check to make sure that the user entered something into the input field adding it to the list 4. When the user clicks on the heading, so a prompt to allow them to change the title. 3.检查并确保用户在输入字段中输入了一些内容，并将其添加到列表中。4.当用户单击标题时，将提示您更改标题。 Make sure they entered something before changing it. 在更改之前，请确保他们输入了某些内容。
window.addEventListener('load', function(){ var todos = document.getElementsByClassName('todo-item'); var removes = document.getElementsByClassName('remove'); document.getElementById('add-item').addEventListener('click', addItem, false); document.querySelector('.todo-list').addEventListener('click', toggleCompleted, false); document.querySelector('.todo-list').addEventListener('click', removeItem, false); function toggleCompleted(e) { console.log('=' + e.target.className); if(e.target.className.indexOf('todo-item') < 0) { return; } console.log(e.target.className.indexOf('completed')); if(e.target.className.indexOf('completed') > -1) { console.log(' ' + e.target.className); e.target.className = e.target.className.replace(' completed', ''); } else { console.log('-' + e.target.className); e.target.className += ' completed'; } } function addItem() { var list = document.querySelector('ul.todo-list'); var newItem = document.getElementById('new-item-text').value; var newListItem = document.createElement('li'); newListItem.className = 'todo-item'; newListItem.innerHTML = newItem + '<span class="remove"></span>'; list.insertBefore(newListItem, document.querySelector('.todo-new')); } function valueField(input,val){ if(input.value == "") input.value=val; } function clearField(input,val){ if(input.value == val) input.value=""; } function removeItem(e) { if(e.target.className.indexOf('remove') < 0) { return; } function handle(e){ var keycode if(e.keyCode === ""){ } return false; } var el = e.target.parentNode; el.parentNode.removeChild(el); } });
body { background-color: #BCDBF2; font-family: Helvetica, Arial, sans-serif; } body > div { width: 300px; margin:50px auto; } h1 { text-align: center; } .todo-list { list-style: none; padding: 0px; } .todo-item { border: 2px solid #444; margin-top: -2px; padding: 10px; cursor: pointer; display: block; background-color: #ffffff; } .todo-new { display: block; margin-top: 10px; } .todo-new input[type='text'] { width: 260px; height: 22px; border: 2px solid #444; } .todo-new a { font-size: 1.5em; color: black; text-decoration: none; background-color: #ffffff; border: 2px solid #444; display: block; width: 24px; float: right; text-align: center; } .todo-new a:hover { background-color: #0EB0dd; } .remove { float: right; font-family: Helvetica, Arial, sans-serif; font-size: 0.8em; color: #dd0000; } .remove:before { content: 'X'; } .remove:hover { color: #ffffff; } .todo-item::after:hover{ background-color: #dd0000; color: white; } .todo-item:hover { background-color: #0EB0FF; color: white; } .completed { text-decoration: line-through; opacity: 0.5; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lab 18 - Event Delegation</title> <link rel='stylesheet' href='main.css'/> </head> <body> <div> <h1>To-Do List</h1> <ul class='todo-list'> <li class='todo-item'>4L 2% Milk <span class='remove'></span></li> <li class='todo-item'>Butter, Unsalted <span class='remove'></span></li> <li class='todo-item'>Dozen Eggs <span class='remove'></span></li> <li class='todo-item'>Walk the dog <span class='remove'></span></li> <li class='todo-item'>Cut the lawn <span class='remove'></span></li> <li class='todo-item'>Laundry <span class='remove'></span></li> <li class='todo-new'> <input id='new-item-text' type='text'/> <a id='add-item' href='#'>+</a> </li> </ul> </div> <script src='main.js'></script> </body> </html>
3 个解决方案
解决方案1
1 2016-03-30 20:09:43
I believe that the key code for enter is 13. See below. 我相信输入的关键代码是13。请参见下文。
function handle(e){
if(e.keyCode === 13){
}
return false;
}
解决方案2
1 2016-03-30 20:10:42
Look up the key code that will correspond to enter. 查找将对应于输入的键码。 One place to find this is on MDN KeyboardEvent:keyCode . 在MDN KeyboardEvent：keyCode上可以找到它。 Using that, you can write: 使用它，您可以编写：
var ENTER = 13;
function handle(e){
if(e.keyCode === ENTER){
// insert a new line or whatever you want
}
return false;
}
解决方案3
1 2016-03-30 20:34:34
You need to register the onkeypress event on a HTML element , for example on the input text, like this: 您需要在HTML元素上注册onkeypress事件，例如在输入文本上，如下所示：
<input id='new-item-text' type='text' onkeypress="return handle(event)" />
Also, you can register the event on <body> or other HTML elements. 另外，您可以在<body>或其他HTML元素上注册事件。 And you can register the event using HTML or using Javascript. 您可以使用HTML或Javascript注册事件。
In HTML: 在HTML中：
<element onkeypress="myScript">
In JavaScript: 在JavaScript中：
object.onkeypress=function(){myScript};
If you want to learn more about this event you can read this docs . 如果您想了解有关此事件的更多信息，可以阅读此文档 。
To know where is the handle function needs to be global (declared outside the load event) . 要知道handle函数在哪里是全局的（在load事件外部声明） 。
The last thing to do, is to filter the enter button with e.keyCode === 13 . 最后要做的是使用e.keyCode === 13过滤回车按钮。 Important: is a Number , not a String. 重要： 是数字 ，而不是字符串。
I put below all the code testable that you can see and run (I applied the example when press enter on the input text). 我将所有可以查看和运行的可测试代码放在下面（我在输入文本上按Enter时应用了示例）。
I hope to help you. 希望对您有所帮助。
All the code 所有代码
window.addEventListener('load', function() { var todos = document.getElementsByClassName('todo-item'); var removes = document.getElementsByClassName('remove'); document.getElementById('add-item').addEventListener('click', addItem, false); document.querySelector('.todo-list').addEventListener('click', toggleCompleted, false); document.querySelector('.todo-list').addEventListener('click', removeItem, false); function toggleCompleted(e) { console.log('=' + e.target.className); if (e.target.className.indexOf('todo-item') < 0) { return; } console.log(e.target.className.indexOf('completed')); if (e.target.className.indexOf('completed') > -1) { console.log(' ' + e.target.className); e.target.className = e.target.className.replace(' completed', ''); } else { console.log('-' + e.target.className); e.target.className += ' completed'; } } function addItem() { var list = document.querySelector('ul.todo-list'); var newItem = document.getElementById('new-item-text').value; var newListItem = document.createElement('li'); newListItem.className = 'todo-item'; newListItem.innerHTML = newItem + '<span class="remove"></span>'; list.insertBefore(newListItem, document.querySelector('.todo-new')); } function valueField(input, val) { if (input.value == "") input.value = val; } function clearField(input, val) { if (input.value == val) input.value = ""; } function removeItem(e) { if (e.target.className.indexOf('remove') < 0) { return; } var el = e.target.parentNode; el.parentNode.removeChild(el); } }); function handle(e) { if (e.keyCode === 13) { console.log("Doing something"); } return true; }
body { background-color: #BCDBF2; font-family: Helvetica, Arial, sans-serif; } body > div { width: 300px; margin: 50px auto; } h1 { text-align: center; } .todo-list { list-style: none; padding: 0px; } .todo-item { border: 2px solid #444; margin-top: -2px; padding: 10px; cursor: pointer; display: block; background-color: #ffffff; } .todo-new { display: block; margin-top: 10px; } .todo-new input[type='text'] { width: 260px; height: 22px; border: 2px solid #444; } .todo-new a { font-size: 1.5em; color: black; text-decoration: none; background-color: #ffffff; border: 2px solid #444; display: block; width: 24px; float: right; text-align: center; } .todo-new a:hover { background-color: #0EB0dd; } .remove { float: right; font-family: Helvetica, Arial, sans-serif; font-size: 0.8em; color: #dd0000; } .remove:before { content: 'X'; } .remove:hover { color: #ffffff; } .todo-item::after:hover { background-color: #dd0000; color: white; } .todo-item:hover { background-color: #0EB0FF; color: white; } .completed { text-decoration: line-through; opacity: 0.5; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lab 18 - Event Delegation</title> <link rel='stylesheet' href='main.css' /> </head> <body> <div> <h1>To-Do List</h1> <ul class='todo-list'> <li class='todo-item'>4L 2% Milk <span class='remove'></span> </li> <li class='todo-item'>Butter, Unsalted <span class='remove'></span> </li> <li class='todo-item'>Dozen Eggs <span class='remove'></span> </li> <li class='todo-item'>Walk the dog <span class='remove'></span> </li> <li class='todo-item'>Cut the lawn <span class='remove'></span> </li> <li class='todo-item'>Laundry <span class='remove'></span> </li> <li class='todo-new'> <input id='new-item-text' type='text' onkeypress="return handle(event)" /> <a id='add-item' href='#'>+</a> </li> </ul> </div> <script src='main.js'></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.