1

3 つcontenteditableの div があり、ユーザーがタブ キーまたはマウス クリックでカーソルまたはキャレットを配置した div を知りたいのですが、

    <div contenteditable="true"></div>
    <div contenteditable="true"></div>
    <div contenteditable="true"></div>

誰か助けてくれませんか？

4

3 に答える 3

3

私はより良い解決策を考え出しました。これにはdiv、カーソルをチェックしたいすべてのタグを親タグに囲み、オブジェクトをdiv使用して、カーソルまたはキャレットが配置されているdivのIDを取得する必要がありますdocument.getSelection()

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>JS Bin</title>
    </head>
    <body>
      <div  id=parent>
            <div contenteditable="true" id=1>dddd
            </div>
            <div contenteditable="true" id=2>dddd
            </div>
            <div contenteditable="true" id=3>dddd
            </div>
      </div>
      <input type="label" id="showRes"></input>
    </body>
    <script type="text/javascript">
var div = document.getElementsByTagName('div');

var out=document.getElementById('parent');

function findCursor(){

var x=document.getSelection();
var r=x.getRangeAt(0);
var tempnode=document.createElement("div");
tempnode.setAttribute("id","cursorhook");
r.surroundContents(tempnode);
document.getElementById('showRes').value=tempnode.parentNode.id;
document.getElementById(tempnode.parentNode.id).removeChild(document.getElementById("cursorhook"));


}


out.onkeyup=findCursor;
out.onclick=findCursor;


    </script>
    </html>
于 2013-05-16T04:43:27.453 に答える
2

を使用しdocument.activeElementます。これは、現在ページでフォーカスされている要素を返すだけです。( MDN )

于 2013-05-15T12:12:38.367 に答える
2

要素にフォーカスを当てるたびにトリガーされるonfocusイベントを使用します ...

例：

var div = document.getElementsByTagName('div');

for(var i=0;i<div.length;i++)
   div[i].addEventListener('focus',function(){document.getElementById('showRes').value = this.id;},false);

HTML :

<div contenteditable="true" id=1></div>
<div contenteditable="true" id=2></div>
<div contenteditable="true" id=3></div>
<input type="label" id="showRes"></input>

デモフィドル

于 2013-05-15T12:19:30.190 に答える