我如何模糊自定义元素

Question

常规输入后，我有一个自定义的小部件。

<input>
<div class="widget" tabindex="0">
  <input tabindex="-1"/>
</div>

• 小部件是div
• 您将选项卡入窗口小部件（因此div具有tabindex）
• 小部件具有内部input，当小部件的div聚焦时，它也会集中。还有其他一些事情也发生了（但这是一个简化的情况！） - 这就是为什么我不仅使用另一个常规输入而不是窗口小部件！

再次，tabbing in 窗口小部件有效：

var widget = document.querySelector('.widget')
var innerInput = widget.querySelector('input')
widget.addEventListener('focus', function(event){
  widget.classList.add('highlighted')
  innerInput.focus()
})

这是一个工作的JDFIDDLE

但是从小部件中退出的情况不起作用。由于内部input是集中的，因此我将blur事件侦听器附加到了它，这也模糊了小部件。i THISE 这将选择以前的常规输入。但这无需做任何事情。

// This doesn't work
innerInput.addEventListener('blur', function(event){
  console.log('blurring!')
  widget.classList.remove('highlighted')
  widget.blur();
})

我如何使tabing从自定义元素工作？

Answer 1

正如@dandavis指出的那样（dan，添加您自己的答案！）您可以使用tabindex删除窗口小部件的Tabbisy，这将将焦点元素移至上一个元素。

var widget = document.querySelector('.widget')
var innerInput = widget.querySelector('input')
widget.addEventListener('focus', function(event){
  widget.classList.add('highlighted')
  innerInput.focus()
  widget.tabIndex = -1;
})
innerInput.addEventListener('blur', function(event){
  console.log('blurring!')
  widget.classList.remove('highlighted')
  setTimeout(function(){ 
    widget.tabIndex = 0; 
  }, 0);
})

请参阅工作小提琴