javascript - 仅关注输入和按钮

Question

是否可以只允许关注某些元素，例如输入和按钮？例如，如果用户将注意力集中在输入字段上，然后单击页面上的其他位置，则该输入将保留焦点。但是，如果用户单击另一个输入或按钮，该新元素就会获得焦点。

我尝试通过 event.stopPropagation(); 和 event.PreventDefault() 来实现此目的，但是，元素似乎仍然失去焦点。

我当前的尝试如下:

$(document).on("click", function (event) {
    if (event.target.tagName !== 'BUTTON' || event.target.tagName !==  'INPUT') {
        event.stopPropagation(); 
        event.preventDefault(); 
    } 
});

有什么建议吗？

Answer 1

您无法阻止焦点丢失，您所能做的就是以编程方式将焦点放回原处。

var last_focus_element;

$(document).on("click", function (event) {
    if (event.target.tagName !== 'BUTTON' && event.target.tagName !==  'INPUT') {
        $(last_focus_element).focus();
    } 
});

$('input,button').on('blur', function() {
  last_focus_element = this;
});

<强> The working demo.