或阿呆のブログ

巷では、武器商人@ダーツで通っていました。Python好き好きプログラマーです。芥川龍之介、太宰治が好きです。

キーボードのキー押下時に文字色を変える。 余談だが、はてなブログのHTML編集でJavaScriptやCSSを書くと、シンタックスハイライトがされて、ちょっとしたIDEみたいに動く。

スポンサードリンク

Sample Code(サンプルコード)

<div id="hoge" style="color: black;">Clicked</div>
<script type="text/javascript">// <![CDATA[
document.onkeypress = keyPress;
document.onkeyup = keyUp;
function keyPress(){
    hoge.style.color="red";
}
function keyUp(){
    hoge.style.color="black";
}
// ]]></script>

Result(実行結果)

JavaScript キー押下時に文字色を変える。 - はてなブログでやってみた | oneshotlife_tomのブログ

キーボードのキーイベント取得には以下を使う。

  • document.onkeypress
  • document.onkeyup

余談だが、はてなブログのHTML編集でJavaScriptCSSを書くと、シンタックスハイライトがされて、ちょっとしたIDEみたいに動く。デバッガこそ付いていないが、Firefox上で、firebugなどを使えば、それこそIDEのような感覚。