1

我有三个contenteditablediv，我想知道用户通过 tab 键或鼠标单击将光标或插入符号放置在哪个 div 中，

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

有人可以帮帮我吗？

4

3 回答 3

3

我制定了一个更好的解决方案，这需要将div要检查光标的所有标签包含在父div标签中，并使用document.getSelection()对象我们可以获得放置光标或插入符号的 div 的 id

    <!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 回答