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、[スパン]をクリックします。
    divのカーソル位置を監視します

divのカーソル位置を比較すると、クリックイベントによってdivの元のカーソル位置が変更されない
ことがわかります。 しかし、クリックイベントはそうです。Button
Span

それは本当に奇妙です、それでここで何が起こっているのですか？
（私のテストはWebKitブラウザーに基づいています。）

4

2 に答える 2

1

動作は Firefox でも同じです。

手足に出て、スパンをクリックすると、スパン内でクリックした場所にカーソルが移動することになると推測します。つまり、div 内の位置が失われます。フォーカスを div に戻すと、デフォルトの場所 (先頭) に配置されます。ボタンはカーソルに対応できないため、ボタンをクリックしてもカーソルは移動しません。そのため、カーソルはずっと div 内の位置に留まっています。

カーソルは html ドキュメントの 1 つで、たとえばテキストの選択にも使用されます。または、キャレット ブラウジングをオンにすると Firefox に表示されます。で div の代わりにコントロール (テキストボックス、またはテキストエリア) を使用するとcontenteditable=true、コントロールが独自のカーソルを管理するため (スパンをクリックするかボタンをクリックするかに違いはありません)、動作は期待どおりになります (これをテストするには、 div を a に置き換えますtextarea)。

于 2012-08-04T07:55:45.870 に答える
0

あなたがしていることのアクセシビリティに関する注意点として、タグはボタンのような「クリック可能な」アセットとは見なされません。そのため、作成しているコントロールへのキーボードのみのアクセスに関して言えば、タグは、マウスでページ コンテンツをナビゲートせず、キーボードに依存しているユーザーに対して必ずしも普遍的に機能するとは限りません。

于 2012-08-29T19:05:05.177 に答える