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上的按键事件（鼠标悬停的事件）。
当您离开div时，mouseleave清除按键处理程序，因此当您将鼠标悬停在另一个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()。此函数将使光标准备好写入。

然后使用bind与'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/（在输入前取消选择代码！）

基本上跟踪“活跃”＆＃39;框，然后在按键事件检查是否有任何活动框（如果光标在某个框中）。如果是这样，请将值附加到该框的输入字段。活动框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（）函数。

鼠标在火按键事件上

5 个答案: