LotusNotesな日々IBM社のLotusNotesに関係する何かを日々語ってるようなきがしないでもないブログです。 

スポンサーサイト

   ↑  --/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

(記事編集) http://mesosune.blog123.fc2.com/?overture" target="_new

--/--/-- | Comment (-) | HOME | ↑ ページ先頭へ |

【JavaScript】クロスブラウザでEnterを検知するには

   ↑  2012/06/04 (月)  カテゴリー: JavaScript/CSS
今回は、クロスブラウザでEnterが押されたかを検知してみたいと思います。

結論から言えば、
安直に キーボードのキーを押した時に発生するイベント で Enter の KeyCode 13 を検知すれば良いのですが、

面倒なのは、
IMEが日本語入力(ひらがなや全角文字)時に
onkeydown属性, onkeypress属性, onkeyup属性のキーイベントは、
UA によって発生状況に差異があることです。

Internet Explorer、Safari、Chrome、Blink版Opera は
すべてのタイプに対して onkeydown属性と onkeyup属性を毎回正確にイベントを発生させます。
ただし、onkeypress属性のイベントは一切発生しません。
onkeydown属性で返ってくるキーコードが229かどうかを監視することで、
日本語入力モードがONであるかどうかを判別することはできますが、
入力中か全確定したか部分確定中かの判別は不可能だったりします。

Firefox では最初の入力時に onkeydown属性と onkeypress属性のイベントが一度だけ発生し、
入力内容の確定時に onkeypress属性が発生します。
onkeypress属性のイベントは一切発生しません。
つまり、onkeyup属性でenterキーのキーコード(13)を監視していれば、
日本語の変換が確定したかどうかを判別できます。

旧Presto版Operaは、ほぼ何も出来ないです。
よって、ほっときます。

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

ここまでが前提です。

で、今回のサンプルスクリプトです。
・Enterが押された時はメッセージを表示し無効化されます。
・IMEの変換確定時のEnterはメッセージが表示されず無効化されません。
・Internet Explorer、Safari、Chrome、Firefox で動くはずです。

var isEnter = false;
//イベント処理(onkeydown用)
function onEvent(evt){
evt = (evt) ? evt : event;
var charCode=(evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
if ( Number(charCode) == 13 || Number(charCode) == 3) {
alert("Enrerが押されたよ");
isEnter = true;
//とりあえずキー入力を無効化します
if( evt.preventDefault ) {
//IE以外の無効化
evt.preventDefault();
evt.stopPropagation();
  }else{
//IEの無効化
evt.returnValue = false;
evt.cancelBubble = true;
}
return false;
} else {
isEnter = false;
return true;
}
}

//イベント処理(onkeyup用)
function onEventField( evt , fldid ){
evt = (evt) ? evt : event;
isEnter = false;
return ( doc.getElementById(fldid).value == "" )? onEvent(evt) : true ;
}

// ブラウザから表示した時にした時に全てに設定する
window.onload = function (){
// 表示上のすべての input タグの要素を取得
var tags = document.getElementsByTagName("input");
for(var i=0; i<tags.length; i++){
// typeがtextとpasswordのみに設定します。
if(tags[i].type == 'text' || tags[i].type == 'password'){
tags[i].onkeydown = function (event){ return onEvent( event ) };
tags[i].onkeypress = function (event){ return onEvent( event ) };
tags[i].onkeyup = function (event){ return onEventField(event , this.id )};
}
}
}
スポンサーサイト

(記事編集) http://mesosune.blog123.fc2.com/blog-entry-390.html

2012/06/04 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ |

Comment

コメントを投稿する 記事: 【JavaScript】クロスブラウザでEnterを検知するには

お気軽にコメントをぞうぞ。
非公開 (管理人のみ閲覧可能なコメント) にしたい場合には、ロック にチェックを入れてください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。