jQuery內聯編輯返回鍵

Question

我有一個有效的內聯編輯腳本，該腳本可讓用戶編輯他或她的名字。

但是當用戶enter key時，它當前不會“保存”

劇本：

<span class="pageTitle" id="username">Visitor 123123981203980912 <span class="iconb" data-icon=""></span></span> 

    // Inline edit
    $.fn.inlineEdit = function(replaceWith, connectWith) {

        $(this).hover(function() {
            $(this).addClass('hover');
        }, function() {
            $(this).removeClass('hover');
        });

        $(this).click(function() {

            var elem = $(this);

            elem.hide();
            elem.after(replaceWith);
            replaceWith.focus();

            replaceWith.blur(function() {

                if ($(this).val() != "") {
                    connectWith.val($(this).val()).change();
                    elem.html($(this).val() + ' <span class="iconb" data-icon=""></span>');
                }

                $(this).remove();
                elem.show();
            });
        });
    };

    var replaceWith = $('<input name="temp" type="text" class="inlineEdit" />'),
        connectWith = $('input[name="hiddenField"]');

    $('#username').inlineEdit(replaceWith, connectWith);            

當按下enter key時，我如何使以上內容也有反應？

Answer 1

您需要檢測回車，並在模糊功能中執行相同的操作。 將以下內容添加到您的js中。 演示

    replaceWith.keypress(function(e) {
        if(e.which == 13) {
            if ($(this).val() != "") {
                connectWith.val($(this).val()).change();
                elem.html($(this).val() + ' <span class="iconb" data-icon=""></span>');
            }

            $(this).remove();
            elem.show();
        }
    });

Answer 2

當在輸入內部按下回車鍵時，這應該觸發：

$('#username').live("keypress", function(e) {
        if (e.keyCode == 13) {
            // action here
        }
});

Answer 3

您可以在keydown上調用相同的功能，然后檢查Enter鍵的e.keyCode是否為13.。小提琴會有所幫助。

還要檢查此鏈接

謝謝，哈迪克