Question

我最近正在研究我的一个项目，目前我遇到了一些问题。好吧，我已经制作了一个内容可编辑的div，用户可以输入它的输入。此content_editable div包含用户必须键入的几个div。我试过document.activeElement但是它给了我content_editable div而不是特定的div和id为second_div的那个我想知道如何在用户输入的content_editable div中找到特定的div。例如： -

<div contenteditable="true" id="content_editable_div">
<div id="first_div">
I am the first div
</div>
<div id="second_div">
I am the second div and i want to know if the focus is on me
</div>
</div>

我的Javascript：

window.onload = function () {
getDivwhohasfocusincontentedtiablediv(); // Something like that 
};

我可以使用jquery但只能在最后一个选择。我想只为了这个目的使用javascript。请帮我解决这个问题，我没有找到解决这个问题的所有网络（可能是我没有仔细搜索过）。提前致谢

Answer 1

一种可能的解决方案是在每个内部div上附加一个事件监听器来监听＆＃34;焦点＆＃34;事件。但是我发现并非所有元素都会发出＆＃34;焦点＆＃34;事件

JQuery文档说：

焦点事件在获得焦点时发送到元素。这个事件隐含地适用于有限的一组元素，例如形式元素（输入，选择等）和链接（一个href）。在最近在浏览器版本中，事件可以扩展为包含所有元素通过显式设置元素的tabindex属性来定义类型。一个 element可以通过键盘命令获得焦点，例如Tab键，或通过鼠标点击元素。

为每个内部div添加tabindex属性可以监听焦点事件。

JSFiddle处的示例。注意：我在JQuery中编写了代码，但它很容易用JS编写。

Answer 2

获取特定div 在Javascript中你可以使用

document.getElementById("second_div")

或使用Jquery

$("#second_div")

确保您的ID是唯一的。这是在任何浏览器中查找obj的最快方法。

现在获得活跃的div。为什么不在点击或编辑div时放置特定事件。像：

  $("#second_div").click (function (){
      //raise flag or something   
      currentDiv =  "second_div";
   })

   function getCurrentDiv()
    {
        //do something in currentDiv
    }

或尝试探索其他事件，例如鼠标悬停，鼠标离开等等。

我希望这可能有所帮助。另外，如果我错过了什么，请详细说明你的问题。

Answer 3

您可以使用此功能在js中找到焦点元素，

var focused = document.activeElement;

Answer 4

这个怎么样，

<div contenteditable="true" id="content_editable_div">
  <div id="first_div">
    First Div
  </div>
  <div id="second_div">
    Second Div
  </div>
</div>



$(document).ready(function () {

    function onMouseUp(e) {
        console.log(this.id);
    }

    document.getElementById("first_div").addEventListener("mouseup", onMouseUp, false);
    document.getElementById("second_div").addEventListener("mouseup", onMouseUp, false);
});

Demo Here JS FIDDLE

获取内容可编辑div中的当前div id（特定）

4 个答案: