

セレクトボックスのドロップダウンリストを閉じた状態でのキーアップ、キーダウンを禁止するため、下記どちらかの対応を考えたのですが、該当するイベントが見当たりません。（ドロップダウンリスト展開時はキー操作可能としたい）どのような実装をすれば良いかご教示頂けませんでしょうか。  
・ドロップダウンリストの要素を選択した時にフォーカスを外す  
⇒onchangeだと既にselectされた要素を選択時が拾えなかった  
・ドロップダウンリストが閉じた時にフォーカスを外す

【コード】

[code]

       <div id="apDivTEST">
            <select name="TEST" id="TEST" style="width:354px; height:40px; font-size:20px; background-color: #000; color: #CFCBC8; border-color: #000; outline:none;">
                <option value="A" id="TEST_1"></option>
                <option value="B" id="TEST_2"></option>
            </select>
       </div>
    
[/code]


CC BY-SA 3.0
2017-09-06T01:21:40.510
37744
2018-03-29T06:41:40.697
2018-03-29T06:41:40.697
19110
25229
question
javascript
セレクトボックスのドロップダウンリストを閉じたときのイベント


> ドロップダウンリスト展開時はキー操作可能としたい

keyup、keydownイベントが発生している要素をチェックし、それがセレクトボックスリストの場合のみイベントを許可するようにすると良いかと思います。

[code]

    function isSelectBox(element) {
      return element.id === 'TEST'; // セレクトボックス要素の場合はtrueを返す
    }
    
    document.onkeydown = function(event) {
      return isSelectBox(event.target);
    };
    
    document.onkeyup = function(event) {
      return isSelectBox(event.target);
    };
    
[/code]

イベントハンドラに登録する関数にて`false`を`return`するとそのイベントを無効化することが出来ます。  
ですので、イベントの発生元要素(上記`event.target`)を取得し、セレクトボックスの場合は`true`を返すようにするとセレクトボックス選択時のみイベントが有効化されます。

※ 対象ブラウザによって挙動が異なる可能性があるためご注意下さい。


CC BY-SA 3.0
2018-03-29T05:43:08.093
42739
2018-03-29T05:43:08.093
27930
37744
answer