无法使用选项卡按钮选择引导模式按钮

initialiseKeySelectModal() {
const modal_div = document.createElement("div");
this.setModalAttributes(
    modal_div,{
        "class": "modal fade","id": "keySelectModal","tabindex": "-1","role": "dialog","aria-labelledby": "keySelectModalLabel","aria-hidden": "true"
    }
);
modal_div.innerHTML = '<div class="modal-dialog modal-dialog-centered" role="document" tabindex="-1">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="keySelectModalLabel">'
                + Joomla.getOptions('set_shorcut_text')
            + '</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" tabindex="-1"></button>
        </div>
        <div class="modal-body">
            <div class="p-3">
                <p>'
                    + Joomla.getOptions('current_combination_text')
                    + ': <span id="currentKeyCombination"></span>
                </p>
                <div class="form-group">
                    <input type="hidden" id="current_KeyEvent" value="" />
                    <input type="hidden" id="current_keyValue" value="" />
                    <input type="hidden" id="current_hasControl" value="0" />
                    <input type="hidden" id="current_hasShift" value="0" />
                    <input type="hidden" id="current_hasAlt" value="0" />
                </div>
                <p>' 
                    + Joomla.getOptions('new_combination_text')
                    + ': <span id="newKeyCombination"></span>
                </p>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close" tabindex="-1">'
                + Joomla.getOptions('cancel_button_text')
            + '</button>
            <button type="button" class="btn btn-success" id="saveKeyCombination" tabindex="-1">'
                + Joomla.getOptions('save_button_text')
            + '</button>
        </div>
    </div>
</div>';
document.body.appendChild(modal_div);
const keySelectModal = document.getElementById("keySelectModal");
Joomla.initialiseModal(keySelectModal);
keySelectModal.addEventListener('keydown',this.handleKeyDownEvent,false);
keySelectModal.addEventListener('keyup',this.handleKeyCombinationkeyUpEvent,false);
const saveKeyCombination = document.getElementById("saveKeyCombination");
saveKeyCombination.addEventListener('click',this.handleSaveCombinationkeyUpEvent,false);
  • 此模式用于捕获组合键的变化
  • 这是我正在使用的引导模式,我无法使用键盘选项卡按钮选择模式按钮。
  • 我尝试了 tabindex 和 focus 来解决。
  • 此模式包括两个按钮,用于取消和保存更改。
zjs0555 回答:无法使用选项卡按钮选择引导模式按钮

只需删除 tabindex="-1" 并确保您的 keyUp 和 keyDown 处理程序不会在事件中返回 false 或 preventDefault() 。

本文链接:https://www.f2er.com/5781.html

大家都在问