如何在页面加载时自动切换到此元素

Question

How do I automatically tab to this element and press enter when the page loads? The element I am trying to use has this class d2l-contextmenu-ph , but I can't seem to tab to it.

 let msg = document.querySelector(".d2l-contextmenu-ph "); msg.addEventListener("keydown", (event) => { alert("test"); });

 <div id="propertiesPlaceholderId" class="d2l-placeholder d2l-placeholder-live" aria-live="assertive"> <div id="d2l_1_69_681" class="d2l-floating-container d2l-hidden "> <template id="OrgUnitEditorProviders$Plugins`1$PluginView$ouPropertiesContextMenu" class="d2l-contextmenu-template" data-floating-container-id="d2l_1_69_681" data-dropdown-content-id="d2l_1_70_789"> <d2l-menu class="d2l-menu-mvc d2l-contextmenu"> <d2l-menu-item text="Edit Properties" id="d2l_1_71_946"></d2l-menu-item> <d2l-menu-item text="Delete Unit" id="d2l_1_72_494"></d2l-menu-item> </d2l-menu> </template> </div><h3 class="d2l-heading vui-heading-3 d2l_1_73_408" id="OrgUnitEditorProviders$Plugins`1$PluginView$propertiesHeading">Properties</h3> <d2l-dropdown-context-menu no-auto-open="" text="Actions for Org Unit Properties" id="d2l_1_74_921" class="d2l-contextmenu-ph d2l-contextmenu-ph-dropdown d2l_1_73_408" data-contextmenuid="OrgUnitEditorProviders$Plugins`1$PluginView$ouPropertiesContextMenu" data-placeholderkey="d2l_1_75_382"> <d2l-button-icon icon="tier1:chevron-down" text="Actions for Org Unit Properties" aria-haspopup="true" aria-expanded="false" type="button" data-js-focus-visible=""> <button class="d2l-label-text" aria-expanded="false" aria-haspopup="true" aria-label="Actions for Org Unit Properties" id="d2l-uid-22" title="Actions for Org Unit Properties" type="button"> <d2l-icon class="d2l-button-icon" icon="tier1:chevron-down">hh</d2l-icon> <d2l-icon class="d2l-button-icon" icon="tier1:chevron-down"></d2l-icon> </button> </d2l-button-icon> </d2l-dropdown-context-menu> <d2l-dropdown-menu no-pointer="" align="start" min-width="200" max-width="370" vertical-offset="12" id="d2l_48_1_419" class="d2l-dropdown-menu-contextmenu" no-auto-focus="" no-padding="" dropdown-content="" opened="" style="--d2l-dropdown-verticaloffset:12px; left: 785.375px;"><d2l-menu class="d2l-menu-mvc d2l-contextmenu" label="Actions for Org Unit Properties" active="" aria-label="Actions for Org Unit Properties" role="menu" style="height: 107px;"> <d2l-menu-item text="Edit Properties" id="d2l_48_2_483" role="menuitem" tabindex="0" aria-disabled="false" aria-label="Edit Properties" first="true"></d2l-menu-item> <d2l-menu-item text="Delete Org Unit" id="d2l_48_3_770" role="menuitem" tabindex="-1" aria-disabled="false" aria-label="Delete Org Unit" last="true"></d2l-menu-item> </d2l-menu></d2l-dropdown-menu>

Answer 1

You can create an object of any Event in you case keyboard event and trigger it using dispatchEvent

 let msg = document.querySelector(".d2l-contextmenu-ph "); msg.addEventListener('keydown', e => { console.log('I was clicked', e.keyCode) }) // function to create keyboard event function createKeyboardEvent(options){ return new KeyboardEvent('keydown', options); } // function to trigget any kind of event on the selected elem function trigger(elem, event){ elem.dispatchEvent(event) } const options = { bubbles: false, cancelable: true, keyCode: 13 } const keyboardEvent = createKeyboardEvent(options) trigger(msg, keyboardEvent)

 <div id="propertiesPlaceholderId" class="d2l-placeholder d2l-placeholder-live" aria-live="assertive"> <div id="d2l_1_69_681" class="d2l-floating-container d2l-hidden "> <template id="OrgUnitEditorProviders$Plugins`1$PluginView$ouPropertiesContextMenu" class="d2l-contextmenu-template" data-floating-container-id="d2l_1_69_681" data-dropdown-content-id="d2l_1_70_789"> <d2l-menu class="d2l-menu-mvc d2l-contextmenu"> <d2l-menu-item text="Edit Properties" id="d2l_1_71_946"></d2l-menu-item> <d2l-menu-item text="Delete Unit" id="d2l_1_72_494"></d2l-menu-item> </d2l-menu> </template> </div><h3 class="d2l-heading vui-heading-3 d2l_1_73_408" id="OrgUnitEditorProviders$Plugins`1$PluginView$propertiesHeading">Properties</h3> <d2l-dropdown-context-menu no-auto-open="" text="Actions for Org Unit Properties" id="d2l_1_74_921" class="d2l-contextmenu-ph d2l-contextmenu-ph-dropdown d2l_1_73_408" data-contextmenuid="OrgUnitEditorProviders$Plugins`1$PluginView$ouPropertiesContextMenu" data-placeholderkey="d2l_1_75_382"> <d2l-button-icon icon="tier1:chevron-down" text="Actions for Org Unit Properties" aria-haspopup="true" aria-expanded="false" type="button" data-js-focus-visible=""> <button class="d2l-label-text" aria-expanded="false" aria-haspopup="true" aria-label="Actions for Org Unit Properties" id="d2l-uid-22" title="Actions for Org Unit Properties" type="button"> <d2l-icon class="d2l-button-icon" icon="tier1:chevron-down">hh</d2l-icon> <d2l-icon class="d2l-button-icon" icon="tier1:chevron-down"></d2l-icon> </button> </d2l-button-icon> </d2l-dropdown-context-menu> <d2l-dropdown-menu no-pointer="" align="start" min-width="200" max-width="370" vertical-offset="12" id="d2l_48_1_419" class="d2l-dropdown-menu-contextmenu" no-auto-focus="" no-padding="" dropdown-content="" opened="" style="--d2l-dropdown-verticaloffset:12px; left: 785.375px;"><d2l-menu class="d2l-menu-mvc d2l-contextmenu" label="Actions for Org Unit Properties" active="" aria-label="Actions for Org Unit Properties" role="menu" style="height: 107px;"> <d2l-menu-item text="Edit Properties" id="d2l_48_2_483" role="menuitem" tabindex="0" aria-disabled="false" aria-label="Edit Properties" first="true"></d2l-menu-item> <d2l-menu-item text="Delete Org Unit" id="d2l_48_3_770" role="menuitem" tabindex="-1" aria-disabled="false" aria-label="Delete Org Unit" last="true"></d2l-menu-item> </d2l-menu></d2l-dropdown-menu>