Question

我使用的功能可以根据鼠标点击时的用户输入更改背景颜色。此外，我希望在用户输入特定颜色到输入字段并按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>

Answer 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>

Answer 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>

我想通过按Enter键来更改HTML文档的背景颜色

2 个答案: