What is the difference between a button and a range when calling focus?

Question

HTML snippet:

<div contenteditable='true' id="txt">123<b>456</b>789</div> <button onclick="get()">Click Me</button> <span onclick="get()">Click Me</span> <script> function get(){ document.getElementById('txt').focus() } </script> 

• Press node named txt , position the cursor in front of 7 , and then click the button.
  See the position of the div cursor.

• Press node named txt , position the cursor in front of 7 , and then click "Span".
  See div cursor position

Compare the position of the div cursor,
You will find that the Button click event does not change the starting position of the div cursor.
But the Span click event does matter.

It's really weird, so what's going on here?
(My test is based on WebKit browsers.)

Answer 1

Firefox has the same thing.

I will go out on a limb and suppose that clicking on the range will move the cursor to where you clicked in the gap, which means that its position inside the div is now lost. Moving the focus back to the div will result in its default location (start). Pressing the button will not move the cursor, because the button cannot place the cursor; so your cursor stayed in position in the div all the time.

The cursor is one of the html documents, also used, for example, to select text; or shown in Firefox if you enable the browser. Now, if you use a control (text box or text box) instead of a div with contenteditable=true , the behavior will be as you expected (no difference between clicking on a range or button), since the control controls its own cursor (to check, just replace it div on a textarea ).

Answer 2

One note regarding the accessibility of what you are doing is that tags are not considered click-activated like a button. Therefore, when it comes to accessing only the keyboard that you create, the tag will not necessarily work universally for those who do not move around the page with the mouse and do not rely on their keyboard.