Getting the current div id in content-editable div(specific)

Question

I am recently working on one of my projects and currently i am stuck in some problem. Well, i have made a content editable div where the user can type its input. This content_editable div contains several div's in which user has to type. I tried document.activeElement but it gives me the content_editable div not the specific div and that the one with id second_div I want to know how to find that specific div in content_editable div where user is type.For example:-

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

My Javascript:

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

I can use jquery but only at the last choice. I want to use only javascript for this purpose.Please help me to solve this, i didn't find solution for this all the net ( it could be that i haven't searched carefully). Thanks in advance

So, what do you need in the end. div where the user currently typing something? — xAqweRx, Feb 15 '16 at 09:15
@xAqweRx Yes. I want to know the specific div in which the user is typing. For example if the div is editing the div having id as second_div , i can know it — Utkarsh Dixit, Feb 15 '16 at 09:16
you need the events and to target the right event for you, take a look here - > http://stackoverflow.com/questions/1391278/contenteditable-change-events — Vitaliy Terziev, Feb 15 '16 at 09:29

score 2 · Accepted Answer · answered Feb 15 '16 at 09:50

One possible solution is to attach an Event Listener on each inner div to listen for "focus" event. However I found out that not all elements emit "focus" events.

JQuery docs says:

The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (input, select, etc.) and links (a href). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

Adding tabindex attribute to each inner div will make it possible to listen to focus events.

Example at JSFiddle. Note: I wrote the code in JQuery but it can easily be written in JS.

Happy to be of help :) – Soubhik Mondal Feb 15 '16 at 09:57 — Soubhik Mondal, Feb 15 '16 at 09:57

dr.Crow · Answer 2 · 2016-02-16T03:35:30.840

0

to get specific div in Javascript you can use

document.getElementById("second_div")

or using Jquery

$("#second_div")

make sure your id was unique. This is the fastest way to find obj in any browser.

now for getting getting the active div. why not put specific event whenever the div was clicked or edited. like:

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

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

or try also explore other event such as, on mouse over, on mouse leave, etc.

i hope that might help. other wise, please elaborate your question if I missed something.

edited Feb 16 '16 at 03:35

answered Feb 15 '16 at 09:27

dr.Crow

1,493
14
17

You've missed the point of question. Question is - how detect in what div user is currently editing text – xAqweRx Feb 15 '16 at 09:30
actually the question is how to know in which user is typing, the initial click is not typing – Vitaliy Terziev Feb 15 '16 at 09:30
ok. thanks. ediited: when the user click the current div, store that div id in a private variable. ^_^ – dr.Crow Feb 16 '16 at 03:36

score 0 · Answer 3 · answered Feb 15 '16 at 09:38

0

You can find focus element in js using this,

var focused = document.activeElement;

answered Feb 15 '16 at 09:38

Dharmik

445
3
10

Read the question, again. It was mentioned that this method is not working – xAqweRx Feb 15 '16 at 09:43

score 0 · Answer 4 · answered Feb 15 '16 at 09:53

What about this ,

<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

Getting the current div id in content-editable div(specific)

4 Answers4