Javascriptスクロールで選択要素にフォーカスを設定する最初の項目が表示されない

Question

選択ボックス（マルチ）の上に入力ボックスを配置したいという問題があります。選択ボックスにはボックスの高さよりも多くの項目があります。 （私はアイテムの数よりもボックスのサイズを低く設定しています）。

<select id="multiSelect" size="3" multiple> 
    <option value="item1">Item 1</option> 
    <option value="item2">Item 2</option> 
    <option value="item3">Item 3</option> 
    <option value="item4">Item 4</option> 
    <option value="item5">Item 5</option> 
    <option value="item6">Item 6</option> 
</select> 

私は、選択ボックスに表示される結果に移動するために彼らの「下向き矢印」を使用し、その後、ユーザーは上記のテキスト入力に値を入力できるようにしたいです。

inputField.addEventListener("keydown", function(e) { 
    if (e.keyCode == 40) { 
    multiSelect.focus(); 
    multiSelect.selectedIndex = 0; 
    } 
}); 

ユーザーがこれを実行すると、マルチ選択ボックスの最初の項目がスクロールして表示されなくなります。この問題はChromeとFirefoxの両方で発生します（Macでは[Safariは正常です]）。

ここで問題を確認できます。

https://jsfiddle.net/rsturim/ops9q3xk/

Answer 1

あなたのKeyEventにpreventDefaultを追加します。私はSafariで気づいたことがあります。たとえば、可能であればページを少し下にスクロールします。それはのKeyEventが実際にあなたの選択が含まれる場合があります物事のカップルに周りに渡されていることを意味します

var inputField = document.getElementById("inputField"); 
 
var multiSelect = document.getElementById("multiSelect"); 
 

 
inputField.addEventListener("keydown", function(e) { 
 
    if (e.keyCode == 40) { 
 
    e.preventDefault(); 
 
    multiSelect.focus(); 
 
    multiSelect.selectedIndex = 0; 
 
    } 
 
}); 
 

 
multiSelect.addEventListener("keydown", function(e) { 
 
    if (e.keyCode == 38 && multiSelect.selectedIndex == 0) { 
 
    inputField.focus(); 
 
    } 
 
});

<div> 
 
    <input id="inputField" type="text" placeholder="start here" /> => use down arrow to move to multi-select box 
 
</div> 
 
<div> 
 
    <select id="multiSelect" size="5" multiple> 
 
    <option value="item1">Item 1</option> 
 
    <option value="item2">Item 2</option> 
 
    <option value="item3">Item 3</option> 
 
    <option value="item4">Item 4</option> 
 
    <option value="item5">Item 5</option> 
 
    <option value="item6">Item 6</option> 
 
    <option value="item7">Item 7</option> 
 
    <option value="item8">Item 8</option> 
 
    <option value="item9">Item 9</option> 
 
    <option value="item10">Item 10</option> 
 
    </select> => use up arrow to move to input box 
 
</div>

Aslo、そう、あなたはinput要素は、自己閉鎖要素であることに注意してください。 <input />ない<input></input>（申し訳ありませんが、SOスニペットエディタはセマンティックエラーが発生した私を示した） （SafariとChromeで動作確認済み）