我想在我用鍵盤聚焦時或用HTMLElement.focus()程式性聚焦時對我的元素應用樣式。
例如，在下面的例子中。我希望<div>最初或當我用tab關注時有藍色邊框。我只希望當我用滑鼠點擊<div>時它有紅色的邊框。
這可能嗎？
編輯1。從用按鈕觸發焦點改為只在渲染時觸發焦點，因為這種情況對我的實際問題并不準確。
編輯2：從vanilla JS改為React，因為我認為這可能是問題所在。似乎它仍然像我希望的那樣在這里作業，但在我的應用程式中卻不是這樣:（。我不知道為什么。
。 。const useFocusOnMount=（ref）=> {
React.useEffect(() => {
if (ref.current) {
ref.current.focus（）。
}
}, [ref])。
};
const App = (props) => {
const divRef = React.useRef(null)
useFocusOnMount（divRef）。
return (
< div ref={divRef} role="listbox" tabindex="0" className="focusable">
<div data-testid="displayValue"/span>> Lol</div>
</div>/span>
);
};
ReactDOM。 render(<App /> , document. getElementById("root")); .focusable {
border: 1px solid lightgrey;
outline: none;
}
.focusable:focus {
border: 2px solid red;
}
.focusable:focus-visible {
border: 2px solid blue;
}<script src="https://cdnjs. cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js">/span></script>
<script src="https://cdnjs.cloudflare. com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>/span>
<div id="root"/span>> </div> uj5u.com熱心網友回復：
不知道你為什么要這樣做，我建議你找一個其他的方法來做你想要的事情（例如，為什么不只使用:focus？
但是對于黑客來說，你可以欺騙瀏覽器認為你的div是可編輯的，它應該*使它觸發其focus-visible規則。
const focusable = document. getElementById('focusable') 。
const button = document.getElementById('button') 。
const onClickHandler=（e）=> {
focusable.contentEditable = true;
focusable.focus（）。
focusable.contentEditable = false;
};
button.addEventListener("click", onClickHandler); .focusable {
border: 1px solid lightgrey;
outline: none;
}
.focusable:focus {
border: 2px solid red;
}
.focusable:focus-visible {
border: 2px solid blue;
}< div id="focusable" class="focusable" tabIndex=0> Lol</div>
<button id="button"> Focus Lol</button>*我只在最新的Chrome和Firefox中進行了測驗。
uj5u.com熱心網友回復：
如果你指向元素本身，你就不能取消元素的焦點。
你必須在body上使用事件監聽器來設計元素的樣式，因為outside點擊是在body，而不是在元素本身。
你可以使用e像this來發現用戶的點擊位置。
如果e (click) !== (不同于/不在) focs (element) outline = 0.
const focs=document. getElementById('focs'/span>)。
const focsb=document.getElementById('focsb') 。
document.body。 addEventListener（'click',function（e）{
if(e.target!==focs&& e.target!==focsb) {
focs.style="outline: 0"/span>。
} else if (e.target==focs& &e.target!==focsb) {
focs.style="outline: 2px solid #000"/span>。
} else {
focs.style="outline: 2px solid #CC0000"。
};
});< input id="focs" type="text">>
<button id="focsb"/span>> 焦點</按鈕>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/333972.html
標籤：