通常，

Question

它就像一个待办事项列表列，您需要一个链接，当点击它时，它会被转换为文本框。我希望在用户完成后，当用户按Enter键或单击某处（模糊jQuery）完成时捕获它。

JSfiddle上的演示

HTML

<li style="list-style:none" id="add">Add</a></li>
<input type="text" style="input:focus; outline:none" name="task-group" display:none>

jquery的

    $(document).ready(function(){
    $("input[name=task-group]").hide();

    var addBtn = $("#add");
    var inputBar = $("input[name=task-group]");

    $("#add").click(function(){
        $(this).hide();
        $(inputBar).show().focus();
    });
        /*  $(document).keypress(function(e) {
    if(e.which == 13 && $(inputBar).val() !== ""){
                $(inputBar).hide();
                var new_task_group  = $(inputBar).val();
                $(addBtn).text(new_task_group);
                $(addBtn).show();    
                }
                    else if(e.which !== 13){
                        $(addBtn).show();
                        $(inputBar).hide();
                    }
    });*/

$("input[name=task-group]").blur(function(){
        if($(inputBar).val() !== ""){
        $(this).hide();
        var new_task_group  = $(this).val();
        $(addBtn).text(new_task_group);
        $(addBtn).show();
        } // if close 
        else {
            $(addBtn).show();
            $(inputBar).hide();
        }
    }); 


    });

Answer 1

通常，

您可以使用.on()将函数绑定到多个事件：

$('#element').on('keyup keypress blur change', function() {
    ...
});

或者只是将函数作为参数传递给普通事件函数：

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)

但是，

如果用户按 Enter ，我不知道如何检查绑定。您需要在函数中执行此操作，但之后我们不知道函数是否由于按键或模糊而实例化，所以我所做的是，在按 Enter 时，blur()您的方框，以便在按 Enter 时自动触发该功能。

演示：your Fiddle。

$("input[name=task-group]").keydown(function (e){
if(e.keyCode == 13){
    $("input[name=task-group]").blur();
}
});

Answer 2

检查this fiddle。
添加了解决方案。

$(document).ready(function(){
    $("input[name=task-group]").hide();

    var addBtn = $("#add");
    var inputBar = $("input[name=task-group]");

    $("#add").click(function(){
        $(this).hide();
        $(inputBar).show().focus();
    });

$("input[name=task-group]").blur(function(){
        if($(inputBar).val() != ""){
        $(this).hide();
        var new_task_group  = $(this).val();
        $(addBtn).text(new_task_group);
        $(addBtn).show();
        } // if close 
        else {
            $(addBtn).show();
            $(inputBar).hide();
        }
    }); 
    });
$(document).keypress(function(e) {
  if(e.which == 13) {
    // enter pressed
      $("input[name=task-group]").blur();
  }
});

如何在jQuery中使用blur（）同时捕获Enter按下

2 个答案:

通常，

但是，