bootstrap 模态框（modal）中的输入框如何获得焦点？

Question

bootstrap 模态框中有个表单，模态框弹出后，如何让表单中的输入框自动获得焦点（即弹出后直接可以输入，不用再点击鼠标）？
我要的效果是这样的

做法如下

    $('#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();
    });

但是没有效果，如图：

Answer 1

//使用 shown.bs.modal 这个事件 试试看  show.bs.modal    在调用 show 方法后触发。 shown.bs.modal    当模态框对用户可见时触发（将等待 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();
    });

Answer 2

应该可以直接在表单里加个autofocus属性吧，考虑兼容性可以挂个polyfill或者jQ插件。

Answer 3

renameInput 是jq对象，不是dom对象，需要转化下

renameInput[0].focus();