搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

Unexpected cursor shown inside focused div

  • 3 回覆
  • 0 有這個問題
  • 27 次檢視
  • 最近回覆由 Ken

more options

I recently noticed a number of places on websites where a cursor would appear in a place where no keyboard input is accepted. I've narrowed it down to this:

Define a div like this: <div tabIndex="1"></div>

Style it like so: div {

 width: 200px;
 height: 100px;
 border: solid 2px red;

} div:focus {

 background-color: lightblue;

}

Click inside the div. It turns blue to show it has focus, but it also shows a cursor at the top-left.

This does not seem to happen when you use <div tabIndex="1" /> and it also doesn't happen in other browsers.

I recently noticed a number of places on websites where a cursor would appear in a place where no keyboard input is accepted. I've narrowed it down to this: Define a div like this: &lt;div tabIndex="1"&gt;&lt;/div&gt; Style it like so: div { width: 200px; height: 100px; border: solid 2px red; } div:focus { background-color: lightblue; } Click inside the div. It turns blue to show it has focus, but it also shows a cursor at the top-left. This does not seem to happen when you use &lt;div tabIndex="1" /&gt; and it also doesn't happen in other browsers.
附加的畫面擷圖

由 Ken 於 修改

被選擇的解決方法

You may have switched on caret browsing. You can toggle caret browsing off/on by pressing F7 (Mac: fn + F7).

  • Settings -> General -> Browsing
    remove checkmark: [ ] "Always use the cursor keys to navigate within pages"

Note that this is a Firefox accessibility feature.

從原來的回覆中察看解決方案 👍 0

所有回覆 (3)

more options

I discovered it doesn't even need to support focus. Just the click on a basic div shows the same.

<html>

 <head>
   <style>
     div {
       width: 200px;
       height: 100px;
       border: solid 2px red;
       padding: 10px;
     }
   </style>
   <title>Unexpected cursor in clicked div</title>
 </head>
 <body>
   <h1>Unexpected cursor in clicked div</h1>
   <ul>
     <li>Click inside the rectangle below.</li>
     <li>
       Expected: Nothing should change.
     </li>
     <li>Actual: A cursor appears at the top-left of the box.</li>
   </ul>
   <div></div>
 </body>

</html>

由 Ken 於 修改

有幫助嗎?

more options

選擇的解決方法

You may have switched on caret browsing. You can toggle caret browsing off/on by pressing F7 (Mac: fn + F7).

  • Settings -> General -> Browsing
    remove checkmark: [ ] "Always use the cursor keys to navigate within pages"

Note that this is a Firefox accessibility feature.

有幫助嗎?

more options

Ah, there you go. That's exactly what it was. I'm not sure how I had turned that on.

Thanks for the speedy explanation!

有幫助嗎?

問個問題

如果您還沒有帳號,您必須先登入帳號 來回覆文章。還沒有帳號的話,只能發問新問題