鼠标悬停触发按键事件

Question

我有以下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>

我想要一个在鼠标悬停在 div 容器上并且用户开始在键盘上键入时触发的函数。仅当用户将鼠标悬停在 divcontainer 上并开始键入时，该函数才会将类 innerdivcontainer 更改为不隐藏。我想使用 .on 因为我将新元素加载到 dom 中，这也应该可以工作

我在想一些事情

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

                     }

        }
   });

我不知道用什么来检查键盘上的击键

Answer 1

我不知道这是否真的是您要寻找的，但这里是jsFiddle。我发现结果很酷，但可能不是很用户友好。考虑为您的 div 添加悬停样式，向您的用户解释如何使用您的评论部分。

关于我的实现有几点需要注意：

首先，在 HTML 标记中使用 tabindex 能够触发 div 上的按键。 （请参阅this post）。除此之外，标记与您的相同。
使用focus和blur触发右侧div（鼠标悬停的那个）的keypress事件。
以及mouseleave 在您离开 div 时清除按键处理程序，因此当您悬停另一个 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(){});
});

请告诉我这是否对您有任何帮助。

Answer 2

我没有测试，但你可以试试...

如果您首先处理输入元素，则应使用focus()。此函数将使光标准备好写入。

然后使用'keypress'绑定来显示元素

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

Answer 3

这里是实时示例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();
    }); 

}

可以这样吗？ :)

Answer 4

我的做法：

http://jsfiddle.net/B7Gnb/（输入前取消选择代码！）

基本上跟踪“活动”框，然后在按键事件中检查是否有任何活动框（如果光标在某个框内）。如果是这样，请将值附加到该框的输入字段。 活动框 jQuery 对象被保存为 activeBox 变量：

我保持简单，只解决打字问题，你可以添加任何你需要的东西。

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

这里有一个方法，你可以怎么做：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>

带有 JQuery 的 JavaScript：

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

但是，如果您想让 inner_div 成为可编辑的文本字段，这会有点复杂，并且需要 $.replaceWith() 函数。