Question

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

<input>

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

小部件是div
您可以将标签添加到窗口小部件中（因此div有tabindex）
窗口小部件有一个内部input，当窗口小部件div聚焦时，它也会被关注。其他一些事情也会发生（但这是一个简化的案例！） - 这就是为什么我不只是使用另一个常规输入而不是小部件！

再一次，将标记为小部件可以正常工作：

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

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

这里是working JDFiddle

但是退出小部件并不起作用。由于内部input是专注的，我已经附加了一个blur事件监听器，它也模糊了窗口小部件。我想这会选择之前的常规输入。但它没有做任何事情。

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

如何制作自定义元素的标签？

Answer 1

正如@dandavis指出的那样（Dan，添加你自己的答案！）你可以使用tabindex来删除widget元素的tabbability，它会将focus元素移动到前一个元素。

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

如何模糊自定义元素？

1 个答案: