2011-08-15 8 views
1

IEとOperaで完璧に動作する<select id="myselect" name="myselect" onChange="(myfunction();)">...</select>があります。 「完璧」とは、マウスまたは「上」、「下」、「PageUp」(Opera用ではない)、「PageDown」(Opera用ではない)のいずれかでドロップリストから値を変更したときに発生するイベントを意味します。 、選択メニューがアクティブ(青色)のときは "Home"と "End"キーが表示されます。 Firefox、3.6.Xvを使用してテストすると問題が発生します。 "Up"と "Down"を使用すると何も起こりませんが、マウスの場合はまだ動作します。 onkeyupイベントの使用をお勧めしますか?私はそれを試してみました、それは上下に "キャッチ"が、IEはonChangeとonkeyupイベントの両方を持っているようです。しかし、私はただ一つのイベントが必要です。 人々はこの問題をどのように解決しますか?javacript onchangeとonkeyupのイベント<Select>のメニュー(上下のキーはFirefoxのonchangeイベントを起動しません)

ありがとうございます。

+4

DOM要素がフォーカスを失い、その値が変更されたときにFirefoxが変更イベントをトリガします。 – scessor

答えて

2

changeイベントを引き続き使用することをお勧めします。 Firefoxの実装は、キーボードユーザにとっては非常に意味があります。 select要素にタブし、UpキーとDownキーを使用してエントリを選択すると、Webページ上でたくさんのアクションをトリガしたくない場合があります。正しいエントリを選択して別のものに移動した後で、アクションを実行されても問題ありません。

0

キーコードをテストして上向き矢印か下向き矢印かを確認し、それに応じて変更イベントを発生させる、keyupイベント用に独自のハンドラを作成することができます。

私自身のjsがあなたに例を書くことは十分ではありませんが、私はjQueryのはそれを行うためにいくつかの例を示すことができる:

$('yourSelect').keyup(function(e) 
{ 

    if (e.keyCode===38) 
    { 
     //this is an up arrow press 

     //trigger the change event 
     $('yourSelect').change(); 
    } 
    else if (e.keyCode===40) 
    { 
     //down arrow has pressed 

     //trigger the change event 
     $('yourSelect').change(); 
    } 
}); 
+0

ここでキーコードをテストすることができます:http://asquare.net/javascript/tests/KeyCode.html – jammypeach

+1