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.

Answer 2

您可以使用全局变量来缓存最后一个元素，重点是在点击input或button之后的另一个元素后重置它：

var $focus_el;

$(document).on("click", function (event) {
    var $this = $(event.target);
    if(!$this.is("input") && !$this.is("button")){
        $focus_el.focus();
    }
});

$('input, button').on('focus', function(){
    $focus_el = $(this);
});

Demo

<强>参考

.is()

event.target

仅关注输入和按钮

2 个答案: