Demo

Question

我创建了代码作为练习。这会根据您在文本框中输入的内容更改浏览器的背景颜色。除了使用setInterval（）方法之外，我无法想象如何以其他方式进行操作，但它让我烦恼。我觉得必须有一个更好的方法，它不涉及每十毫秒检查一次更改。有解决方案吗

setInterval(function(){colorNow()},10);
function colorNow(){
    var chooseColor = document.getElementById("color").value;;
    document.bgColor = chooseColor;
}

Answer 1

我会这样做，使用keyup事件

var chooseColor = document.getElementById("color");
chooseColor.addEventListener('keyup', function() {
    document.bgColor = chooseColor.value;
}, false);

这里有一些事件https://developer.mozilla.org/en-US/docs/Web/API/Event

keyup事件 - 每次用户释放键时，都会调用提供给keyup事件的功能，而输入为focused时因为我们将event直接添加到chooseColor元素

该函数的false部分是default（它被称为 / bubbling | bubble | bubbles / ）并且它会阻止事件冒泡DOM树，所以如果它是true该元素的父母将被通知该事件。 https://developer.mozilla.org/en-US/docs/Web/API/event.bubbles

Demo

Answer 2

function changeColor() {
    document.bgColor = this.value;
}

document.getElementById("color").addEventListener("change", changeColor);
document.getElementById("color").addEventListener("keyup", changeColor);

Answer 3

尝试添加keyup事件：

document.getElementById('color').addEventListener('keyup', colorNow)

每次用户释放密钥时（当输入一个字母时），都会调用colorNow。

Answer 4

您需要在输入标记中使用onchange事件来调用colorNow（）函数。

http://www.w3schools.com/jsref/event_onchange.asp

如何使这个JavaScript代码更实用？

4 个答案:

Demo