onkeydown属性 onkeypress属性 onkeyup属性

Updated 2013.09.30 / Published 2005.10.02

onkeydown属性は当該要素の上でキーボードのいずれかのキーが押された時に起動するスクリプトを指定します。onkeypress属性は当該要素の上でキーボードのいずれかのキーが押されて、そして放された時に起動するスクリプトを指定します。onkeyup属性は当該要素の上でキーボードのいずれかのキーが放された時に起動するスクリプトを指定します。これらのキー操作に関するイベント属性（イベントハンドラ）は、いずれの UA においても正確な動作はIMEが半角英数字の入力状態を対象としているようです。

バージョン

HTML4.01(S,T,F)
XHTML1.0(S,T,F)
XHTML1.1

必須

非推奨

属性値

スクリプト

IMEが日本語入力（ひらがなや全角文字）時における onkeydown属性, onkeypress属性, onkeyup属性のキーイベントは、UA によって発生状況に差異があります。

旧Presto版Opera ではすべてのイベントが一切発生しません。
Firefoxでは最初の入力時に onkeydown属性と onkeypress属性のイベントが一度だけ発生し、入力内容の確定時に onkeypress属性が発生します。onkeypress属性のイベントは一切発生しません。
Internet Explorer、Safari、Chrome、Blink版Opera はすべてのタイプに対して onkeydown属性と onkeyup属性を毎回正確にイベントを発生させます。ただし、onkeypress属性のイベントは一切発生しません。

また、onkeydown属性, onkeypress属性, onkeyup属性を同一の要素に併せて使用した場合、イベントは onkeydown→onkeypress→onkeyup の順に発生します。

onkeydown属性 onkeypress属性 onkeyup属性を指定できる要素型

多くの要素に指定できますが、現状のUAでは実質的には選択可能な状態（フォーカス）になるa要素, area要素, button要素, input要素, label要素, option要素, select要素, textarea要素にしか働きかけることができません。それ以外の要素には、現在どの UA もまだフォーカスを得ることができません。

A

B

C

D

E

F

H

h1-h6
hr

I

K

L

M

N

O

P

Q

R

S

T

U

V

onkeydown属性 onkeypress属性 onkeyup属性のサンプル

次のスクリプトでは onkeydown属性, onkeypress属性, onkeyup属性の各キーイベントの発生状況を入力状態に応じて菱形の白黒記号を反転させて示します。このスクリプトからどのタイミングで各イベントが発生しているのか、また日本語入力時の各UA のイベントの発生が異なることが確認できます。

<script type="text/javascript">
var keyDown = 0;
function Down() {
if(++keyDown%2) {
document.forms.chekey.d.value = "◇" ; }
else {
document.forms.chekey.d.value = "◆" ; } }
var keyPress = 0;
function Press() {
if(++keyPress%2) {
document.forms.chekey.p.value = "◇" ; }
else {
document.forms.chekey.p.value = "◆" ; } }
var keyUp = 0;
function Up() {
if(++keyUp%2) {
document.forms.chekey.u.value = "◇" ; }
else {
document.forms.chekey.u.value = "◆" ; } }
</script>
......
<form name="chekey"><table>
<tr><td colspan="3">キーイベント確認欄：
<input type="text" size="40" name="a"
onkeydown="Down();" onkeyup="Up();" onkeypress="Press();">
</td></tr><tr>
<th>onkeydown</th><th>onkeypress</th><th>onkeyup</th>
</tr><tr>
<td><textarea cols="2" rows="1" name="d"></textarea></td>
<td><textarea cols="2" rows="1" name="p"></textarea></td>
<td><textarea cols="2" rows="1" name="u"></textarea></td>
</tr></table></form>