onkeydown属性は当該要素の上でキーボードのいずれかのキーが押された時に起動するスクリプトを指定します。onkeypress属性は当該要素の上でキーボードのいずれかのキーが押されて、そして放された時に起動するスクリプトを指定します。onkeyup属性は当該要素の上でキーボードのいずれかのキーが放された時に起動するスクリプトを指定します。これらのキー操作に関するイベント属性（イベントハンドラ）は、いずれも半角英数字の入力状態を対象するようです。
onkeydown属性, onkeypress属性, onkeyup属性のキーイベントは、いずれも半角英数字の入力状態を対象としているようです。日本語入力（ひらがなや全角文字）では、UA によってイベントの発生状況が大きく異なります。まず、Opera では一切イベントが発生しません。Netscape、及び Firefox の Gecko系では最初の入力時に onkeydown属性と onkeypress属性のイベントが一度だけ発生し、入力内容の確定時に onkeypress属性が発生します。Internet Explorer はすべてのタイプに対して onkeydown属性と onkeyup属性が正確に毎回イベントを発生させるのですが、何故か onkeypress属性のイベントは一切発生しません。Safari では最初の入力時に onkeydown属性と onkeypress属性のイベントが一度だけ発生し、onkeyup属性はすべてのタイプに対して正確に毎回イベントを発生させます。
また、onkeydown属性, onkeypress属性, onkeyup属性を同一の要素に併せて使用した場合、イベントは onkeydown→onkeypress→onkeyup の順に発生します。
次のスクリプトではテキスト入力欄の字数制限を行います。指定された文字数を超え、次に何れかのキーが押されると、onkeydown属性のイベントが発生し、入力できる最大文字数をオーバーしたことを伝えるダイアログを表示します。textarea要素には入力できる最大文字数を制限する input要素の maxlength属性のような機能がないため、スクリプトによって文字数を制限するのが有用です。ただし、JavaScript が利用できない・無効にしている環境では、このようなクライアントサイドスクリプトは機能しなくなり、いくらでも文字数を入力できるため、最大入力可能文字数は CGIプログラム内で制限しておくようにしましょう。
<script type="text/javascript">
var check = false
function chklen(target,maxlength) {
if ( target.value.length >= maxlength ) {
check = false ;
alert("字数オーバーです。半角10文字以内で入力してください。");
target.value = target.value.substr(0,maxlength)
target.focus();
} else { check = true } }
</script>
......
<form action="xxx.cgi" onsubmit="return check">
<p><textarea name="body" cols="50" rows="8"
onkeydown="chklen(this,10)"></textarea></p>
......
</form>
次のスクリプトでは 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>