Focus Trap
The focus trap control configures an arbitrary focus loop between two focusable controls. It does not prevent the focus from being placed outside this loop, and is therefore most useful when used in combination with modal controls - in a modal scenario, focus can be prevented from leaving the loop until the modal control is closed. See the following example.
Inline Drawer with modal and focus trap
<div class="toggle-container" data-transition-duration="500"
data-close-external="#focusTrapWithModal" data-focus-element="#focusTrapTextbox1"
data-focus-return-element="#ftReturnTextbox">
<div class="container overflow-hidden height-xl width-full background-translucent-1 border-xs">
<div class="height-full">
<div class="place-middle-center gap-vertical-md">
<input type="text" class="input-sm" id="ftReturnTextbox" /><br />
<input type="text" class="input-sm" /><br />
<input type="text" class="input-sm" />
</div>
</div>
<div id="focusTrapWithModal" class="toggle-item off-canvas-left place-top-left dark-alternate width-lg-xl height-full layer-top">
<div class="place-top-right top-xs text-xl text-bold">
<a href="javascript:void(0)" class="toggle-activator button-link dark-alternate rounded-right-sm shadow-md pad-sm fixed" data-target="#focusTrapWithModal">⋮</a>
</div>
<div class="toggle-item-content place-middle-center gap-vertical-md pad-sm">
<input type="text" class="input-sm" id="focusTrapTextbox1" /><br />
<input type="text" class="input-sm" /><br />
<input type="text" class="input-sm" id="focusTrapTextbox3" />
</div>
</div>
</div>
</div>
<div id="focusTrapModalPanel" class="modal"></div>
HTML
webui.ready( () => {
var focusTrapModal = ui("#focusTrapModalPanel").modalControl({
transitionDuration: 300
});
ui( "#focusTrapWithModal" ).on("ui.toggleItem.show.before", (e) => {
focusTrapModal.open();
});
ui( "#focusTrapWithModal" ).on("ui.toggleItem.hide.after", (e) => {
focusTrapModal.close();
});
var focusTrapFocusTrap = ui("#focusTrapWithModal").focusTrapControl({
firstFocusElement: "#focusTrapTextbox1",
lastFocusElement: "#focusTrapTextbox3"
});
//ui("#textbox1").setFocus();
});
JS
Settings
Javascript settings available for the focus trap control.
| Property | Description |
|---|---|
| firstFocusElement | Sets element that will be the start of the focus tab cycle. |
| lastFocusElement | Sets element that will be the end of the focus tab cycle. |