イベント.altKey
機能: イベント発生時に Alt キーが押されたかどうかを検出します。
構文:event.altKey
値: true | false
例証します:
altKey 属性は、イベントの発生時に Alt キーが押し続けられたことを示す場合は true、Alt キーが押されなかったことを示す場合は false です。
altKey 属性はマウスまたはキーボードと組み合わせて使用でき、主にショートカット操作を作成するために使用されます。
イベント.ctrlKey
機能: イベント発生時に Ctrl キーが押されたかどうかを検出します。
構文:event.ctrlKey
値: true | false
例証します:
ctrlKey 属性が true の場合、イベントの発生時に Ctrl キーが押されたままであることを意味します。 false の場合、Ctrl キーは押されませんでした。
ctrlKey 属性はマウスまたはキーボードと組み合わせて使用でき、主にショートカット操作を作成するために使用されます。
イベント.シフトキー
機能: イベント発生時に Shift キーが押されたかどうかを検出します。
構文: イベント.shiftKey
値: true | false
例証します:
shiftKey プロパティが true の場合、イベントの発生時に Shift キーが押されたままであったことを意味します。 false の場合、Shift キーは押されませんでした。
ShiftKey 属性はマウスまたはキーボードと組み合わせて使用でき、主にショートカット操作を作成するために使用されます。
例1
組み合わせた操作の例。
次のようにコードをコピーします。
<input id="txt1" type="text" value="Hello World!" onclick="checkAlt(event)" />
<script type="text/javascript">
関数 checkAlt(oEvent)
{
if(oEvent.altKey)
document.getElementById("txt1").select();
}
</script>
このコードの効果は次のとおりです。
Alt キーを押しながら上のテキスト ボックスをクリックすると、テキスト ボックス内のテキストを選択できます。
例 2
組み合わせた操作の例。
次のようにコードをコピーします。
<input id="txt2" type="text" value="Hello World!" onclick="clearText(event)" />
<script type="text/javascript">
関数クリアテキスト(oEvent)
{
if( oEvent.ctrlKey && oEvent.keyCode==46 )
document.getElementById("txt2").value = "";
}
</script>
このコードの効果は次のとおりです。
「Ctrl+Del」キーの組み合わせを使用して、上のテキスト ボックスの内容をクリアします。 (最初にテキスト ボックスにフォーカスする必要があります。この例は IE ブラウザにのみ適用されます。)
例 3
組み合わせた操作の例。
次のようにコードをコピーします。
<div id="box" onclick="setColor(event)"></div>
<script type="text/javascript">
var b = true;
関数 setColor(oEvent)
{
if( oEvent.shiftKey && b )
document.getElementById("box").style.backgroundColor = "青";
if( oEvent.shiftKey && !b )
document.getElementById("box").style.backgroundColor = "赤";
b = !b;
}
</script>
このコードの効果は次のとおりです。
「Shift」キーを押しながら上のカラーブロックをマウスでクリックすると、カラーブロックの色を変更できます。