如何在IE中动态生成的挖空模板中将自动焦点转移到输入元素 [英] How can I get auto focus to an input element in a dynamically generated knockout template in IE

问题描述

我问过这个问题并得到了一个很好的答案，所以现在我在淘汰赛中有一个动态模板，效果很好，除了在IE中我无法获得动态模板在弹出渲染时将焦点设置在其中一个输入字段中。将自动对焦添加到tem，平板脚本文本在chrome中工作，但我也希望它在IE中工作，但似乎无法实现。

I asked this question and got a great answer, so now I have a dynamic template in knockout, which works great, except in IE I can't get the dynamic template to set the focus in one of the input fields when the popup is rendered. Adding the autofocus to the tem,plate script text works in chrome, but I'd like it to work in IE as well, but can't seem to get it to.

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>

然后当然分别定义所有需要的模板：

and then of course define all of your needed templates separately:

<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绑定：

I tried using the knockout hasfocus binding:

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

I also tried adding some jquery into the function which shows the form:

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

在渲染模板后，如何将焦点设置为使用自动对焦标记的输入？

What can I do to set the focus into the input tagged with autofocus after the template has been rendered?

推荐答案

我追溯了你之前的问题（ here 和这里），看到你正在使用Bootstrap作为模态。我正在这个背景下回答这个问题。

I traced your prior questions leading to this (here and here), and saw that you were using Bootstrap for the modal. I am answering this question under that context.

为了让它使用一个模态，关键是将 hasFocus 绑定到一个observable（在此示例中为 isFocused ），并在其后切换其值modal通过 shown.bs.modal <呈现/ a>事件。

To get it working with a modal, the key is to point the hasFocus binding to an observable (isFocused in this example), and toggle its value after the modal has rendered, via the shown.bs.modal event.

请参阅小提琴： http://jsfiddle.net/JasperTey/CRnXW/ 。

See fiddle: http://jsfiddle.net/JasperTey/CRnXW/.

<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

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 。

Non-modal Case

When using a knockout template in a regular non-modal scenario, the hasFocus binding should work as per your original expectations. Either explicitly via hasFocus: true, or hasFocus: isFocused where isFocused is initialized to true.

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

See fiddle of non-modal example: http://jsfiddle.net/JasperTey/4gzKu/

这篇关于如何在IE中动态生成的挖空模板中将自动焦点转移到输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！