0

它就像一个待办事项列表列，您需要一个链接，单击它时会转换为文本框。我想在用户完成时捕捉它，当用户按 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();
        }
    }); 


    });
4

2 回答 2

0

通常，

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

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

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

var myFunction = function() {
   ...
}

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

但，

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

演示：你的小提琴。

$("input[name=task-group]").keydown(function (e){
if(e.keyCode == 13){
    $("input[name=task-group]").blur();
}
});
于 2013-08-01T06:09:52.557 回答
0

检查这个小提琴。
添加了解决方案。

$(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();
  }
});
于 2013-08-01T06:13:36.637 回答