我想通过按回车键来更改 HTML 文档的背景颜色答案

【问题标题】：I want to change the background color of the HTML document by pressing the enter key我想通过按回车键来更改 HTML 文档的背景颜色
【发布时间】：2017-11-01 21:32:43
【问题描述】：

我使用了一个函数，它可以根据用户点击鼠标时的输入来改变背景颜色。另外，我希望用户在输入字段中输入特定颜色并按 Enter 键后，它应该立即更改 HTML 正文背景颜色。请帮我解决这个问题并用纯 JavaScript 编写代码。

function changeColor(){

var color = document.getElementById("color").value;
document.body.style.background = color;
}

<p>
Enter your fav colour<input type="text" id="color">

<button onclick="changeColor();" onkeypress="changeColor()";> Click </button>
</p>

【问题讨论】：

stackoverflow.com/questions/12955222/…的可能重复

标签： javascript html

【解决方案1】：

您可以添加一个按键事件侦听器，该侦听器仅在您按下某个键时触发，工作示例：

function changeColor() {

  var color = document.getElementById("color").value;
  document.body.style.background = color;
}
document.querySelector('#color').addEventListener('keydown', function(e) {
  if (e.keyCode === 13) { // enter key
    changeColor();
  }
});

<p>
  Enter your fav colour<input type="text" id="color">

  <button onclick="changeColor();"> Click </button>
</p>

【讨论】：

你打败了我 :(

【解决方案2】：

function changeColorWhenEnter(e) {
  if (e.keyCode == 13) {
    changeColor();
  }
}
function changeColor(){
  var color = document.getElementById("color").value;
  document.body.style.background = color;
}

<p>
  Enter your fav colour
  <input type="text" id="color" onkeypress="changeColorWhenEnter(event)";>
  <button onclick="changeColor();" > Click </button>
</p>

【讨论】：