アットウィキロゴ

Eventの処理

ブラウザ上でEnter Keyを押された時の処理を制御するにはどうするの?

ブラウザ上で何かキーが押された時にはeventオブジェクトが生成されます。
このeventオブジェクトには様々なプロパティがあり、キーボードでのキーの動きやブラウザ上のマウスの動きを知らせてくれます。
ただし、キー操作に関するイベント属性は半角英数字の入力状態を対象とするらしく、日本語入力の場合はブラウザによって挙動が大きく異なるようです。
Opera…一切イベントが発生しない。
FireFox…最初の入力時に onkeydown属性と onkeypress属性のイベントが一度だけ発生し、入力内容の確定時に onkeypress属性が発生します。
IE…すべてのタイプに対して onkeydown属性と onkeyup属性が正確に毎回イベントを発生させるのですが、何故か onkeypress属性のイベントは一切発生しません。
Safari…Safari では最初の入力時に onkeydown属性と onkeypress属性のイベントが一度だけ発生し、onkeyup属性はすべてのタイプに対して正確に毎回イベントを発生させます。

さて、Enter Keyを押したことをどうやって知るのでしょうか?
それはKey Codeをみることでわかります。
function keyCode(e){
  if(document.all)
    return e.keyCode;
  else if(document.getElementById)
    return (e.keyCode)? e.keyCode: e.charCode;
  else if(document.layers)
    return e.which;
}
以上の様な方法でKey Codeを取得することができます。
ちなみに以下のサイトには各ブラウザでのKey Codeの一覧が載っています。
各ブラウザでキーコードを取得してみた
さてリストを見るとEnterは13ですね。
そこで以下のように実装します。
function disable_enter(e) {
  if (e.which == 13) {
    return false;
  }
  return true;
}

$(function() {
  $('.noEnter').keypress(disable_enter);
});
これでEnterが無効になります。
参考サイト
サラッとjQueryプラグインを書けると(・∀・)イイ!!感じ
上記サイトには上のソースをJQueryのプラグインにしたものがあります。
それも合わせて使ってみるといいかもしれませんね。

タグ:

javascript 開発
最終更新:2011年01月18日 01:58
ツールボックス

下から選んでください:

新しいページを作成する
ヘルプ / FAQ もご覧ください。