Mouse over fire key press event

Question

I have the following html

 <div class="divcontainer" id="divcontainer1" data-element="1">
   <div class="innerdivcontainer hidden" id="innerdivcontainer1"></div>
 </div>
 <div class="divcontainer" id="divcontainer2" data-element="2">
   <div class="innerdivcontainer hidden" id="innerdivcontainer2"></div>
 </div>
 <div class="divcontainer" id="divcontainer3" data-element="3">
   <div class="innerdivcontainer hidden" id="innerdivcontainer3"></div>
 </div>

I want a function that fires when the mouse is over div container and a user begin to type on his keyboard. The function would change the class innerdivcontainer to not hidden only if the user is hovering over divcontainer and begins to type. I want to use .on because I have new elements loaded into the dom which should also work

I'm thinking something along these lines

 //check for mouse over event
   $('.divcontainer').on({
        mouseenter: function () {
     var data-element = $(this).attr('data-element').
               //check if user begins to type something with if statement
                   if(//code goes here){
                       $('innerdivcontainer'+data-element).show();

                     }

        }
   });

I don't know what to use to check for a key stroke on the keyboard

Answer 1

I don't know if that is really what you are looking for but here is a jsFiddle. I find the result cool but maybe not very user-friendly. Think about adding hover style to your div, to explain to your users how to use your comment section.

There are several things to note about my implementation :

First, the use tabindex in the HTML markup to be able to trigger keypress on a div. (Refer to this post). Aside of this, the markup is the same as yours.
The use of focus and blur to trigger the keypress event on the right div (the one hovered by the mouse).
And the mouseleave to clear the keypress handler when you leave the div, so the comment section won't appear when you're hovering another div)

$('.divcontainer').mouseenter(function () {
    var data_element = $(this).attr('data-element');
    $(this).focus();
    $(this).on("keypress", function() {
        $('#innerdivcontainer' + data_element).show();
    });
}).mouseleave(function(){
    $(this).blur();
    $(this).on("keypress", function(){});
});

Please tell me if this helps you in any way.

Answer 2

I didn't test it but you can try...

If you are dealing with an input element first you should use focus(). This function will put the cursor ready to write.

Then use bind with 'keypress' to show the element

$('input').bind('keypress', function(e) { show(); });

Answer 3

Here the live example http://jsfiddle.net/vLF8U/

$(function() {
    $(".divcontainer").mouseenter(function() {
        mouseUp(this);
        console.log('here');
    }); 
});

function mouseUp(_this){

    $(_this).append("<textarea class='comment'></textarea>");
    mouseDown(_this);

}

function mouseDown(_this){

    $(_this).mouseleave(function() {
        $(_this).find(".comment").remove();
    }); 

}

Can be thus? :)

Answer 4

My approach:

http://jsfiddle.net/B7Gnb/ (deselect code before typing !)

Basically keep track of 'active' box, then on keypress event check if there is any active box (if the cursor is in some box). If so, append the value to the input field of that box. Active box jQuery object is saved as activeBox variable:

I kept it simple and only adressed the typing problem, you can add whatever you need.

var activeBox = false;

$(document).on('mouseenter', '.box', function() {
    activeBox = $(this);
    console.log(activeBox.get(0).id);
});

$(document).on('mouseleave', '.box', function() {
    activeBox = false;
});

$(document).keypress(function(e){
    if(activeBox)
    {
        var $input = activeBox.find('input'),
              val1 = $input.val();
        $input.val(val1 + String.fromCharCode(e.keyCode));    
    }
});

HTML

<div class="box" id="1">
    <span>box1</span>
    <input type="text">
</div>

<div class="box" id="2">
    <span>box2</span>
    <input type="text">
</div>

Answer 5

Here is a way, how you could do it: http://jsfiddle.net/tricon/Q7CK8/

HTML:

<div id="outer_div_one" class="outer_div">
  <div id="inner_div_one" class="inner_div hidden"></div>
</div>

Javascript with JQuery:

var mouseOnDiv = false;

$(".outer_div").on("mouseenter", function () {
  mouseOnDiv = true;
  $(this).children("div:first").addClass("trigger");
}).on("mouseleave", function() {
  mouseOnDiv = false;
  $(this).children("div:first").removeClass("trigger");
});

$(window).on("keypress", function() {
  if(mouseOnDiv) {
    $(".trigger").removeClass("hidden").addClass("unhidden");
  }
});

If, however, you want to make the inner_div an editable text field, this is a bit more complicated and requires $.replaceWith() functions.