ほとんどのブラウザに対応したキーイベントのプログラムをJavascri

質問

ほとんどのブラウザに対応したキーイベントのプログラムをJavascriptで書きたいのですが、
IEではwindow.eventは使えましたがFireFoxなどでは定義されていないエラーになります。
ブラウザごとのキーイベントについて知りたいです。
IE,FireFox,Safari,Chrome,Opera,Netscape,Other

回答No.8

think49

そういえば、過去にeventオブジェクトに関する質問に回答したなあ、とログを探してみたら、

イベントの関数について、よくわからないことがあります。 | OKWave
http://okwave.jp/qa/q5951570.html

…同じ人！！

>> #7 (Chaireさん)
とても参考になりました。
現状は「keydown/keyup + keyCode (よほどの場合はkeypress)」で定義するのがいいのですね。

回答No.7

Chaire

まず、IE でも attachEvent() に登録したイベントハンドラにはイベントオブジェクトが渡されます。また、HTML のイベント属性値では onkeydown="event" のように event を使うことができます。

基本的に、window.event は過去の遺物として使用を避けて下さい。マルチデバイスなどに対応できなくなります。

※イベント属性内は、IE 以外では event という仮引数を持つ関数になっています（onkeydown="alert(arguments.callee)" してみれば分かります）。HTML5 はこの挙動を採用しています。IE のイベント属性内は仮引数なしの関数ですが、なぜか event キーワードを使うことができます。これは window.event ではありません。
※どうしても過去の IE 用コードを使い回さざるをえないのであれば、No.6 のように IE を模倣するコードはよく知られています。
http://webfx.eae.net/dhtml/ieemu/index.html

さて、キーボードイベントはデバイスの種類や OS 上の扱いに強く依存するため、大幅に標準化が遅れています（IME 制御も含む）。

・IE 由来の e.keyCode（DOM2-Events 草案に取り込まれたが破棄、現在の主要ブラウザは皆サポート）
・NN 由来の e.which（現在 IE 以外はサポート）
・DOM2-Events 草案由来（ただし破棄）の e.charCode（Gecko と WebKit はサポート）
・DOM3-Events 草案由来（ただし破棄）e.keyIdentifier（WebKit はサポート）
・DOM3-Events 由来の e.key（現状でサポートなし）

しかも、これらの値は keydown/keyup、keypress で異なることがあります。例えば：

・e.charCode は keypress 時のみ取れます。Gecko は常に文字コードを返します（ゆえに制御キーには使えない）が、WebKit は制御キーのときにキーコードを返します。
・IE、Opera の e.keyCode は、文字キーなら文字コード、制御キーならキーコードを返しますが、Gecko の e.keyCode は常にキーコードを返します。WebKit の e.keyCode は、keydown/keyup 時は常にキーコードを、keypress 時は IE と同様の振る舞いをします。

こうした混乱のため、とりあえず DOM3-Events 現草案では keypress の使用を避けるよう勧めています。また、主要ブラウザの e.keyCode は下記にまとめられていますので参照して下さい。欠けが多いのが難点ですが。
http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#keyset-keyCode-charCode

DOM3-Events では e.keyCode も e.charCode も取り込まず、e.key（旧 e.keyIdentifier）で統一する予定です。そうなれば、将来的にはキー名で（例えば e.key == 'Right'、'A'）指定でき、プラットフォーム依存も減るでしょう。それまでは、keydown/up と e.keyCode（よほどの場合のみ keypress）で急場をしのいで下さい。何年後かは分かりませんが。

参考URL：

http://unixpapa.com/js/key.html

回答No.6

神崎 渉瑠（@taloo）

IE以外はwindow.eventではなく引数として渡されます。

これでwindow.eventが使えるかもしれません。

if(!window.event)
window.addEventListener('load', function(){
document.addEventListener('keydown', function(e){window.event=e;}, true);
document.addEventListener('keypress', function(e){window.event=e;}, true);
}, false);

onclickとかonloadとか、全部のイベントでwindow.eventを使いたければ、その数だけaddEventListenerを増やして下さい。
配列にしてループさせれば簡単だと思います。

回答No.5

k0021

質問内容にあているかわかりませんが

基本は下記は、参照URLの内容ですが

参考URL：

http://www.fureai.or.jp/~tato/DHTML/simple/part3/cross/getkeycd.htm

回答No.4

think49

#3 です。

ちょびっと更新しました。
http://vird2002.s8.xrea.com/test/event.keyCode.html
http://vird2002.s8.xrea.com/test/textareaSelectEndPoint.html

** 更新点 **
・Operaでデフォルトアクションをキャンセルできていなかった ("/" が入力されていた) 不具合を修正 (Opera10.60 はkeydownイベントの時はデフォルトアクションをキャンセルできない)
・IEでテキストボックスにフォーカスがあたった時、カーソルを文字列末尾に移動するようにした (既定動作では、文字列先頭にカーソルを移動する)

selectionオブジェクトに相当するDOM仕様がなさそうなのがややショック。
DOM-Level-3 ならあるのでしょうか…。

# IEだけじゃなくて、Firefox3.6.6 や Opera10.60 も結構アクが強い感じ。

回答No.3

think49

Gmailライクに / を入力したら、検索ボックスにフォーカスをあててみる。

-----------
<form action="search.php">
　<p><label for="query">検索ワード</label><input type="text" name="query" id="query" /></p>
　<p><input type="submit" name="submit" value="検索" /></p>
</form>

<script type="text/javascript"><!--
(function () {
　function keydownListener (event) {
　　var target = event.target || event.srcElement,
　　　　doc　　= target.ownerDocument;
　　if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && event.keyCode == 191) {　// key == "/"
　　　doc.getElementById('query').focus();
　　　event.preventDefault ? event.preventDefault() : event.returnValue = false;
　　}
　}
　if (document.addEventListener) {
　　document.addEventListener('keydown', keydownListener, false);
　} else if (document.attachEvent) {
　　document.attachEvent('onkeydown', keydownListener);
　}
})();
//--></script>
-----------

element.addEventListener - MDC
https://developer.mozilla.org/ja/DOM/element.addEventListener
attachEvent Method (A, ABBR, ACRONYM, ...)
http://msdn.microsoft.com/en-us/library/ms536343%28VS.85%29.aspx

回答No.2

yambejp

キーを判別したいだけならこんな感じ？

<script>
try{
document.addEventListener('keydown',function(e){keydownfunc(e)},true);
}catch(e){
document.attachEvent('onkeydown',function(e){keydownfunc(e)});
}
function keydownfunc(e){
if(e.keyCode==13){
alert("enter");
}
}
</script>
please push enter key!

回答No.1

yyr446

IEだけが特殊だと考えた方がよいでしょう。

他のブラウザーはDOM Level2 EVENT Modelに概ね従っているので、

https://developer.mozilla.org/ja/DOM/event

を参考にすればよいと思います。

W3C DOM Level 2 EVENT
http://www.w3.org/TR/DOM-Level-2-Events/events.html

DOM Level 3 Event
http://www.w3.org/TR/DOM-Level-3-Events/

※IEも次のバージョンぐらいから、DOM EVENTをサポートするみたいなので、
今更、IE用の処理を極めなくてもよろしいかと．．．