鍍金池/ 問答/網絡安全  HTML/ bootstrap 模態(tài)框（modal）中的輸入框如何獲得焦點？

bootstrap 模態(tài)框（modal）中的輸入框如何獲得焦點？

bootstrap 模態(tài)框中有個表單，模態(tài)框彈出后，如何讓表單中的輸入框自動獲得焦點（即彈出后直接可以輸入，不用再點擊鼠標）？
我要的效果是這樣的
圖片描述

做法如下

    $('#renameModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var fileName = button.data('filename');
        var id = button.data('id');

        var modal = $(this);
        var renameForm = modal.find("#renameForm");
        var action = renameForm.attr("base-action");
        renameForm.attr("action", action+id);
        console.log(fileName);
        var renameInput = modal.find('.modal-body #file-name');
        renameInput.val(fileName);

        //獲得焦點時文本全選
        renameInput.focus(function () {
            this.select();
        });
        renameInput.focus();
    });

但是沒有效果，如圖：
圖片描述

回答
編輯回答
刮刮樂

renameInput 是jq對象，不是dom對象，需要轉化下

renameInput[0].focus();

2017年3月2日 09:58
編輯回答
生性

應該可以直接在表單里加個autofocus屬性吧，考慮兼容性可以掛個polyfill或者jQ插件。

2017年3月16日 12:39
編輯回答
擱淺
//使用 shown.bs.modal 這個事件 試試看  show.bs.modal    在調用 show 方法后觸發(fā)。 shown.bs.modal    當模態(tài)框對用戶可見時觸發(fā)（將等待 CSS 過渡效果完成）。
 $('#renameModal').on('shown.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var fileName = button.data('filename');
        var id = button.data('id');

        var modal = $(this);
        var renameForm = modal.find("#renameForm");
        var action = renameForm.attr("base-action");
        renameForm.attr("action", action+id);
        console.log(fileName);
        var renameInput = modal.find('.modal-body #file-name');
        renameInput.val(fileName);

        //獲得焦點時文本全選
        renameInput.focus(function () {
            this.select();
        });
        renameInput.focus();
    });
2017年6月22日 05:50