防止mousedown竊取當前輸入焦點，但允許選擇文本

Question

是否可以防止div中的mousedown竊取焦點，但允許在此容器中選擇文本（例如<div>）？

/*// Version #1: Focus kept, but text is not selectable 
 
$('div').on('mousedown', function(event) { 
 
    event.preventDefault(); 
 
}); 
 
/**/ 
 

 
// Version #2: Focus kept, text selectable, but focus is missing for a short time (flickering when css is applied to focused state) 
 
$('div').on('mousedown', function(event) { 
 
    window.setTimeout(
 
    function() { 
 
     $('input').focus(); 
 
    }, 1 
 
); 
 
}); 
 
/**/ 
 

 
$('input').focus();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" /> 
 
<div>A div container with some text, that should be selectable but not stealing focus of the input field</div>

我的第二個版本閃爍，只需點擊文本時（在目前的Chrome測試）。在Firefox中，選擇始終始於輸入字段。有沒有更好的解決方案？

Answer 1

答案就在你的眼前:)

/*// Version #1: Focus kept, but text is not selectable 
 
$('div').on('mousedown', function(event) { 
 
    event.preventDefault(); 
 
}); 
 
/**/ 
 

 
// Version #2: Focus kept, text selectable, but focus is missing for a short time (flickering when css is applied to focused state) 
 
$('input').on('focusout', function(event) { 
 
//setTimeout(function(){$('input').focus()}, 1); 
 
}); 
 
/**/ 
 

 

 
//$('div').on('mouseup', function(event) { 
 
// $('input').focus(); 
 
//}); 
 

 
$('html').on('mouseup', function(event) { 
 
    $('input').focus(); 
 
}); 
 

 

 
$('input').focus();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" /> 
 
<div>A div container with some text, that should be selectable but not stealing focus of the input field</div>

這個問題，如果你的mouseup發生這種div之外，將失去焦點將持續存在。

另一種方法是綁定mouseup即使在html，雖然這聽起來有點過分IMO，但似乎工作。

問題是，如果您想要將焦點返回到輸入複選框，則需要使用代碼段中顯示的focusout事件。 「保持」焦點在輸入框上的另一個範例是行不通的，因爲Javascript是同步的，一次只能運行一件事。