1

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

【コード】

   <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>

 

1 件の回答 1

1

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

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

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

document.onkeydown = function(event) {
  return isSelectBox(event.target);
};

document.onkeyup = function(event) {
  return isSelectBox(event.target);
};

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。