如何在 IE 中动态生成的剔除模板中自动聚焦到输入元素

Posted 2023-03-12

【中文标题】如何在 IE 中动态生成的剔除模板中自动聚焦到输入元素

【英文标题】：How can I get auto focus to an input element in a dynamically generated knockout template in IE

【发布时间】：2014-03-20 23:43:45

【问题描述】：

我问了this question，得到了一个很好的答案，所以现在我在淘汰赛中有一个动态模板，效果很好，除了在 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'),
    // ...
;

然后在你的绑定中，做

<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>

我尝试使用淘汰赛 hasfocus 绑定：

<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();
;

如何在模板渲染后将焦点设置到带有 autofocus 标记的输入中？

【问题讨论】：

是否可以显示一个小提琴，这不起作用？我会尝试与您类似的选择......所以一定有更多的选择。

我似乎无法使用动态模板来解决问题，但是当我这样做时，我会使用链接更新问题。

您是否尝试过在超时时手动设置焦点的这两行，即在 newStepModal.show(true) 之后等待 100 毫秒才能调用焦点？我注意到淘汰赛可见性/if/模板绑定和与 DOM 交互的时间问题。

@xdumaine 我回家后试试，这是个好主意

查看模板绑定的 afterRender 选项。这会给你一个钩子来做任何自动对焦的事情

【参考方案1】：

我追踪了导致此问题的您之前的问题（here 和 here），并看到您使用 Bootstrap 作为模态。我是在这种情况下回答这个问题的。

在模态中

要让它与模态一起工作，关键是将hasFocus 绑定指向一个可观察对象（本例中为isFocused），并在模态渲染后通过shown.bs.modal 事件切换其值。

见小提琴：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 绑定应该按照您最初的期望工作。通过hasFocus: true 或hasFocus: isFocused 显式地通过isFocused 初始化为true。

查看非模态示例的小提琴：http://jsfiddle.net/JasperTey/4gzKu/