如何在IE中动态生成的挖空模板中将自动焦点转移到输入元素

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

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

然后在你的绑定中，做

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

  Name:
 Type:
  

我尝试使用knockout hasfocus绑定：

  Name:
 Type:
  

但这似乎不起作用。

我还尝试在显示表单的函数中添加一些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

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

在一个模态中

要使它使用模态，关键是将hasFocus绑定指向一个observable（在此示例中为isFocused ），并在模式渲染后通过shown.bs.modal事件切换其值。

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

HTML

 Launch modal 
 
 
 
 × 
 
 
 
 Close Save changes 
 
 
 
  

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/