Question

我试图制作一些JavaScript，根据标有“颜色”的文本框中的十六进制代码，立即更改网站的背景颜色。当我按下提交按钮但它希望它在不需要提交的情况下自行更改时，它可以正常工作。

提前致谢

$(function(){
  setInterval(changeBackground, 1);
});


function changeBackground() {
  // The working function for changing background color.
  document.bgColor = document.getElementById("color").value;
}

Answer 1

您必须为onchange分配一个<input>事件监听器，就像我在以下代码中所做的那样：

 document.getElementById('color').addEventListener('change', changeBackground);

Answer 2

结帐addEventListener和input event。 addEventListener可让您对点击，文本框值更改等事件做出反应。每次用户在相关元素中输入内容时，input事件都会触发。

＆＃13;

var colorEl = document.getElementById('color');
colorEl.addEventListener('input', function() {
  document.bgColor = colorEl.value;
});

＆＃13;

body {
  width: 100%;
  height: 100%;
}

＆＃13;

<input type="text" id="color" />

＆＃13;

专业提示：bgColor不再是这种做法的首选方式。它已被弃用，不能保证在浏览器中不再起作用。每当样式化时，使用CSS会好得多。

document.style.backgroundColor = colorEl.value;

如果您宁愿等到用户完成输入，然后将焦点移到其他地方，您可以使用change event。

＆＃13;

var colorEl = document.getElementById('color');
colorEl.addEventListener('change', function() {
  document.bgColor = colorEl.value;
});

＆＃13;

body {
  width: 100%;
  height: 100%;
}

＆＃13;

<input type="text" id="color" />

＆＃13;

Answer 3

尝试观看事件键

＆＃13;

function changeBackground() {
  document.bgColor = '#' + document.getElementById("color").value;
}

＆＃13;

<input id="color" onkeyup="changeBackground()" />

＆＃13;

Answer 4

感谢大家的建议。

Cyril Beeckman的建议对我来说效果很好，但我发现他们都会奏效。欢呼声

function changeBackground() {
  document.bgColor = '#' + document.getElementById("color").value;
}

<input id="color" onkeyup="changeBackground()" />

立即改变bg颜色

4 个答案: