get iframe id according to position of user cursor

Question

i have 2 iframe with contenteditable(true) in my webpage, my question is how do i get iframe id according to position of cursor caret?

eg : iframe1 and iframe2, if user cursor caret position in iframe2 then it will alert id frame2

i already tried following code

  $(document).ready(function(){

   $('iframe').on('change mouseup mousedown mouseout keydown', function(){

      var iframeID = $(this).attr('id');

      $(this).contents().unbind(); 

      $(this).contents().bind('click', function(){

          alert(iframeID);  
      });
   }); 

});

but it doesnt work

any suggestion?

Answer 1

Use hover
http://api.jquery.com/hover/

 $("iframe").hover( function() { alert('mouse in to ' + $(this).attr('id')) }, function() { //alert('mouse out of '+$(this).attr('id')) } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <iframe id="foo">foo</iframe> <iframe id="bar">bar</iframe> 

Answer 2

Can use mouseenter:

$(document).ready(function() {
    $('iframe').mouseenter(function(h) {
        var id = $(this).attr('id');
        alert(id);
    });
});

Here a fiddle: http://jsfiddle.net/saq02L9o/