7

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，然后单击 Span。
    观察 div 的光标位置

对比div的光标位置，
你会发现Button点击事件并没有改变div原来的光标位置。
但是Span点击事件确实如此。

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

4

2 回答 2

1

Firefox 中的行为是相同的。

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

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

于 2012-08-04T07:55:45.870 回答
0

关于您正在做的事情的可访问性的一个说明，标签不像按钮那样被视为“可点击”资产。因此，当涉及到您正在创建的控件的仅键盘访问时，该标签不一定适用于那些不使用鼠标浏览页面内容并依赖键盘的人。

于 2012-08-29T19:05:05.177 回答