如何模糊自定义元素？

Question

经过常规输入后，我制作了一个自定义小部件。

<input>

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

小部件是 div
您切换到小部件（因此 div 有一个 tabindex）
小部件有一个内部 input，当小部件的 div 获得焦点时，该小部件也会获得焦点。其他一些事情也会发生（但这是一个简化的案例！）-这就是为什么我不只是使用另一个常规输入而不是小部件！

同样，使用 Tab 键进入小部件有效：

var widget = document.querySelector('.widget')
var innerInput = widget.querySelector('input')

widget.addEventListener('focus', function(event){
  widget.classList.add('highlighted')
  innerInput.focus()
})

这是一个working JDFiddle

但是从小部件中按 Tab 键返回不起作用。由于内部 input 是焦点，我附加了一个 blur 事件侦听器，它也模糊了小部件。我认为这将 select 以前的常规输入。但它什么也没做。

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

如何使自定义元素的制表符有效？

Answer 1

正如@dandavis 指出的（Dan，添加您自己的答案！）您可以使用tabindex 删除小部件元素的tabbability，这会将焦点元素移动到前一个元素。

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

见working fiddle

如何模糊自定义元素？

How can I blur out of a custom element?

javascript

custom-controls

event-handling