我问了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();
};
在呈现模板后,如何将焦点设置到带有自动对焦标记的输入中?
最佳答案
我追踪了您之前导致此问题的问题(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">×</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/
关于javascript - 如何在 IE 中动态生成的挖空模板中自动聚焦到输入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22547472/