Question

HTML代码片段：

<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>

单击名为txt的节点，将光标设置在7之前，然后单击按钮。
  观察div的光标位置。



单击名为txt的节点，将光标设置在7之前，然后单击跨度。
  观察div的光标位置

比较div的光标位置，
您会发现Button单击事件不会更改div的原始光标位置但是Span点击事件会发生。

这真的很奇怪，所以这里发生了什么？（我的测试基于WebKit浏览器。）

Answer 1

Firefox中的行为相同。

我会走出困境，推测单击跨度将导致光标移动到您在跨度中单击的位置，这意味着它在div中的位置现在已丢失。将焦点移回div将把它放在默认位置（开头）。点击按钮不会导致光标移动，因为按钮不能容纳光标;所以你的光标一直保持在div中的位置。

光标是html文档之一，也用于选择文本，例如;或者在Firefox中显示如果您打开插入的插入符号。现在，如果您使用控件（文本框或textarea）而不是带contenteditable=true的div，行为将如您所期望的那样（单击跨度或按钮之间没有区别），因为控件管理自己的光标（要测试这个，只需用textarea）替换div。

Answer 2

关于您正在进行的操作的可访问性的一个注意事项，标记不被视为像按钮那样的“可点击”资产。因此，当涉及到您正在创建的控件的仅键盘访问时，对于那些不使用鼠标浏览页面内容并依赖键盘的人来说，标签不一定能够普遍使用。

调用焦点时按钮和跨度有什么区别？

2 个答案: