javascript - 如何在 IE 中动态生成的挖空模板中自动聚焦到输入元素

Question

我问了this question并得到了一个很好的答案，所以现在我在 knockout 中有一个动态模板，效果很好，除了在 IE 中，当呈现弹出窗口时，我无法获得动态模板以将焦点设置在输入字段之一中。将自动对焦添加到 tem，plate 脚本文本可以在 chrome 中使用，但我希望它也可以在 IE 中使用，但似乎无法实现。

modal = {
    header: ko.observable("This is a modal"),
    //this is now just the name of the template
    body: ko.observable('bodyTemplateA'),
    // ...
};

然后在你的绑定(bind)中，做

<div class="modal-body" data-bind="template: { name: body }">
</div>

然后当然要单独定义所有需要的模板:

<script id="bodyTemplateA" type="text/html">
     Name:<input id='workflowname' autofocus type="text" data-bind="value: paramName" /><br/>
     Type:<input type="text" data-bind="value: paramType" /><br />
</script>

我尝试使用 knockout hasfocus 绑定(bind):

<script id="bodyTemplateA" type="text/html">
     Name:<input autofocus type="text" data-bind="value: paramName, hasfocus: true" /><br/>
     Type:<input type="text" data-bind="value: paramType" /><br />
</script>

但这似乎行不通。

我还尝试在显示表单的函数中添加一些 jquery:

self.showStepModal = function () {
    self.newStepModal.show(true);
    //tried both of the following lines but neither seems to work...
    $('[autofocus]:not(:focus)').eq(0).focus();
    $('#workflowname').focus();
};

在呈现模板后，如何将焦点设置到带有自动对焦标记的输入中？

Answer 1

我追踪了您之前导致此问题的问题(here 和 here)，发现您正在使用 Bootstrap 作为模态。我是在这种情况下回答这个问题的。

在模式中

要使其与模态一起工作，关键是将 hasFocus 绑定(bind)指向一个可观察对象(本例中为 isFocused)，并在模态之后切换其值已呈现，通过 shown.bs.modal事件。

参见 fiddle : http://jsfiddle.net/JasperTey/CRnXW/ .

HTML

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel" data-bind="text: header"></h4>
            </div>
            <div class="modal-body" data-bind="template: { name: body }"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script id="bodyTemplateA" type="text/html">
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" data-bind="value: name, hasFocus: isFocused" />
    </div>
    <div class="form-group">
    <label>Type</label>
        <input type="text" class="form-control" data-bind="value: type" />
    </div>
</script>

JavaScript

// View Model
var modal = {
    name: ko.observable(),
    type: ko.observable(),

    header: ko.observable("This is a modal"),
    body: ko.observable('bodyTemplateA'),

    isFocused: ko.observable(false)
};
ko.applyBindings(modal);

// This event is fired when the modal has been made visible to the user
$('#myModal').on('shown.bs.modal', function(){
    modal.isFocused(true);
});

非模态大小写

在常规非模态场景中使用挖空模板时，hasFocus 绑定(bind)应该按照您最初的预期工作。通过 hasFocus: true 或 hasFocus: isFocused 明确显示，其中 isFocused 被初始化为 true。

请参阅非模态示例的 fiddle : http://jsfiddle.net/JasperTey/4gzKu/