JavaScript，按回车键

时间：2016-03-30 20:04:55

标签： javascript

我的JavaScript分配是一个'待办事项列表'，用户需要能够按下回车键，我尝试了这段代码，但它没有用。如果有人有任何建议，请告诉我！感谢

编辑：这是我的JavaScript，HTML和CSS文件

编辑II：这是完整的指示 1.插入新项目后，清除输入字段 2.如果用户按下回车键，请执行与单击加号按钮相同的操作。 3.检查以确保用户在输入字段中输入了一些内容，并将其添加到列表中 4.当用户单击标题时，提示允许他们更改标题。确保他们在更改前输入了一些内容。 The output 

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 个答案:

答案 0 :(得分：1)

我认为输入的关键代码是13.见下文。

function handle(e){
    if(e.keyCode === 13){
    }
    return false;
}

答案 1 :(得分：1)

查找与enter对应的密钥代码。找到这个的地方是MDN KeyboardEvent:keyCode。使用它，你可以写：

var ENTER = 13;
function handle(e){
    if(e.keyCode === ENTER){
      // insert a new line or whatever you want
    }
    return false;
}

答案 2 :(得分：1)

您需要在 HTML元素上注册 onkeypress 事件，例如输入文字，如下所示：

<input id='new-item-text' type='text' onkeypress="return handle(event)" />

此外，您可以在<body>或其他HTML元素上注册活动。您可以使用HTML或使用Javascript注册活动。

在HTML中：

<element onkeypress="myScript">

在JavaScript中：

object.onkeypress=function(){myScript};

如果您想了解有关此活动的更多信息，请阅读this docs。

要知道handle函数在哪里需要全局（在加载事件之外声明）。

最后要做的是使用e.keyCode === 13过滤 enter 按钮。重要提示：是数字，而不是字符串。

我在下面列出了所有可以查看并运行的代码（我在输入文本上按输入时应用了示例）。

我希望能帮助你。

所有代码

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>

相关问题
最新问题