2

練習としてコードを作成しました。これにより、テキスト ボックスに入力した内容に基づいてブラウザーの背景色が変わります。setInterval() メソッドを使用する以外の方法を理解できませんでしたが、それは私を悩ませます。10ミリ秒ごとに変更をチェックする必要のない、より良い方法が必要だと思います。解決策はありますか？

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

4 に答える 4

3

私はこのように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離すたびに呼び出されますが、これは要素に直接追加したためです。focusedeventchooseColor

関数のfalseセクションはdefault( /bubbling|bubble|bubbles/と呼ばれます) であり、DOM ツリーをバブリングするイベントを停止するため、trueその要素の親である場合、イベントが通知されます。 https://developer.mozilla.org/en-US/docs/Web/API/event.bubbles

デモ

于 2013-07-19T23:25:38.720 に答える
1 
function changeColor() {
    document.bgColor = this.value;
}

document.getElementById("color").addEventListener("change", changeColor);
document.getElementById("color").addEventListener("keyup", changeColor);
于 2013-07-19T23:26:25.053 に答える
0

keyupイベントを追加してみてください:

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

これはcolorNow、ユーザーがキーを放すたびに呼び出されます (文字が入力されたとき)。

于 2013-07-19T23:25:53.650 に答える
0

colorNow() 関数を呼び出すには、input タグで onchange イベントを使用する必要があります。

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

于 2013-07-19T23:27:27.820 に答える