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

スポンサーサイト

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

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

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

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

   ↑  2012/06/07 (木)  カテゴリー: JavaScript/CSS
前回の別解です。
今回はプロトタイプ継承をガンガン使いますので少し難易度が高いかもしれません。

DOM的にイベントが発生した時に関数が動くようにするためには addEventListener またはattachEventを使用します。

addEventListener はノードが持つメソッドで 3つの引数をとります。
1つ目の引数はイベント名。基本的な構文は「onclick」のときは"click"と記載し、onはつかないのですが、IEは付けないと動きません。
2つ目の引数はイベントリスナ。要は呼び出される関数です。
3つ目の引数はフェーズ。イベントの伝播形式なんですが、説明は省略します。とりあえずはfalseでいいです。

addEventListenerはIE8.0前のIEでは使用できないため、
かわりにattachEventを使用します。

今回はイベントの発生元を取得してみます。
イベント発生元を取得するには
ブラウザごとにevent.target とか、event.srcElement と指定方法が異なります。
そのあたりも吸収してみます。

今回は、
・IME入力確定時はEnter扱いされないように対応してあります。
・エンターや要素を押したりするとメッセージが表示されます。
・処理をとめることはしていません。
・イベントが発生したエレメントを取得する方法も記載してたりしてます。
・Internet Explorer、Safari、Chrome、Firefox で動くはずです。

// イベントを追加する
function addEvent(evt, func, cap) {
if (this.addEventListener){
this.addEventListener(evt, func, cap);
} else if (this.attachEvent){
this.attachEvent('on' + evt, func);
} else {
alert('ご使用の環境では、このスクリプトはご使用できないです');
}
}
Object.prototype.addEvent = addEvent;
HTMLDocument.prototype.addEvent = addEvent;
Element.prototype.addEvent = addEvent;

// イベント発生元の要素を取得する
function getTarget() { return this.srcElement || this.target; }
Event.prototype.getTarget = getTarget;

// イベント発生時のキーコードを取得する
function getKeyCode() { return ( this.charCode ) ? this.charCode : (( this.which ) ? this.which : this.keyCode ) ; }
Event.prototype.getKeyCode = getKeyCode;

// クリックした時
function onElementsClick(){
alert("要素が押されたよ")
}

// キーボードを押した時 onKeyDown
function onElementsKeyDown(evt){
var keycode = evt.getKeyCode();
if ( Number(keycode) == 13 ){
alert( "エンターが押されたよ(KeyDown)");
}
}

// キーボードを押した時 onKeyPress
function onElementsKeyPress(evt){
var keycode = evt.getKeyCode();
if ( Number(keycode) == 13 ){
alert( "エンターが押されたよ(KeyPress)");
}
}

// キーボードを押した時 onKeyUp
function onElementsKeyUp(evt){
var keycode = evt.getKeyCode();
var elm = evt.getTarget();
if ( Number(keycode) == 13 ){
if ( elm.value == "" ){ alert( "エンターが押されたよ(KeyUp):炎狐IMEEnter");};
}
}

// ウィンドウ ロードでイベントを登録します
addEvent('load',
function (evt) {
//すべてのタグを取得します
var tags = document.getElementsByTagName("*");
for( var cnt = 0 ; cnt <= tags.length ; cnt++ ){
var elm = tags.item(cnt);
var elmname = elm.tagName;
//input タグのみとします(最初のgetElementsByTagNameで"input"としても同じです)
if( elmname.toLowerCase() == "input" ){
elm.addEvent('click', onElementsClick, false);
elm.addEvent('keydown', onElementsKeyDown, false);
elm.addEvent('keypress', onElementsKeyPress, false);
elm.addEvent('keyup', onElementsKeyUp, false);
}
}
},
true
);
スポンサーサイト

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

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

Comment

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

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

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

Trackback

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