Javascript 如何获取放置光标或插入符号的div？_Javascript_Cursor_Element_Caret

Javascript 如何获取放置光标或插入符号的div？

javascript

Javascript 如何获取放置光标或插入符号的div？,javascript,cursor,element,caret,Javascript,Cursor,Element,Caret,我有三个contenteditablediv，我想知道用户通过tab键或鼠标单击将光标或插入符号放置在哪个div中 <div contenteditable="true"></div> <div contenteditable="true"></div> <div contenteditable="true"></div> 有人能帮我吗？使用document.activeElement。这只是返

我有三个

contenteditable

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

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

有人能帮我吗？

使用

document.activeElement

。这只是返回页面上当前有焦点的元素。（）

使用

document.activeElement

。这只是返回页面上当前有焦点的元素。（）

在聚焦元素时使用触发事件

例如：

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

var div=document.getElementsByTagName（'div'）；
对于（var i=0；i使用事件，该事件在聚焦元素时触发
例如：
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);

var div=document.getElementsByTagName（'div'）；
对于（var i=0；i我制定了一个更好的解决方案，这将需要将要检查光标的所有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>


JS-Bin
dddd
dddd
dddd
var div=document.getElementsByTagName（'div'）；
var out=document.getElementById（'parent'）；
函数findCursor（）{
var x=document.getSelection（）；
var r=x.getRangeAt（0）；
var tempnode=document.createElement（“div”）；
setAttribute（“id”、“cursorhook”）；
r、 周围内容（临时节点）；
document.getElementById（'showRes'）。value=tempnode.parentNode.id；
document.getElementById（tempnode.parentNode.id）.removeChild（document.getElementById（“cursorhook”）；
}
out.onkeyup=findCursor；
out.onclick=findCursor；
我想出了一个更好的解决方案，这将需要将要检查光标的所有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>


JS-Bin
dddd
dddd
dddd
var div=document.getElementsByTagName（'div'）；
var out=document.getElementById（'parent'）；
函数findCursor（）{
var x=document.getSelection（）；
var r=x.getRangeAt（0）；
var tempnode=document.createElement（“div”）；
setAttribute（“id”、“cursorhook”）；
r、 周围内容（临时节点）；
document.getElementById（'showRes'）。value=tempnode.parentNode.id；
document.getElementById（tempnode.parentNode.id）.removeChild（document.getElementById（“cursorhook”）；
}
out.onkeyup=findCursor；
out.onclick=findCursor；
oops很匆忙，y打错了oops很匆忙，y打错了，因为它适用于HTML文档，不接受coz不适用于xmlUp，因为它适用于HTML文档，不接受coz不适用于xml