Question

所以我基本上有一个输入字段，一旦点击文本就弹出。我希望我在输入字段中输入的文本替换原始文本，看起来很简单，但我在这里迷失了......

JQuery的：

$('.profile-brief').click(function () {
         $(this).click(function (e) {
             var statusBio = $('#status').val();
             $(this).replaceWith('<form><input id="status" type="text"></input></form>');
             if (e.keyCode == 13) {
                 console.log(statusBio);
                 $(this).html('<form><input id="status" type="text">' + statusBio + '</input></form>');
             }
         });
     });

这里是 http://jsfiddle.net/0beocw0o/

Answer 1

我已经在jsfiddle中更新了你的代码

  $('.profile-brief').on('click',function(e){
       var textbox = document.createElement('input');
       textbox.type = 'text';
       textbox.id = 'status';
       $('.profile-brief').html(textbox);
       $('.profile-brief').off();
       $('#status').on('keypress',function(e){
          if(e.keyCode === 13){
             $('.profile-brief').html($('#status').val());
          }
       });
   });

http://jsfiddle.net/0beocw0o/1/

Answer 2

您可以这样做：

$('.profile-brief').click(function (e) {
        var txt=$(this).text(); 
        $(this).hide();
        var inputbox=$('#status');                 
        inputbox.val(txt);
        inputbox.show();
        inputbox.focus();

    });

$('#status').keypress(function(e){
    console.log(e.which);
    if(e.which == 13){
       var txt=$(this).val();
        $(this).hide();
        $('.profile-brief').text(txt);
        $('.profile-brief').show();
    }
});

最好将关键事件监听器放在onclick事件监听器之外，并且你有两个点击处理程序，这就是你的点击事件在第二次点击后工作的原因。

这是jsfiddle：http://jsfiddle.net/0beocw0o/3/

Answer 3

我对它的理解;不确定为什么要在按键上添加输入但是你可以试试。每次点击个人资料简介

时，这都适用

$('.profile-brief').click(function () {
    $(this).toggle();
    $("#status").toggle();
    $("#status").focus();
})


$('#status').keydown(function(e){
    if (e.which == 13){
        var statusBio = $('#status').val();
        $(".profile-brief").html(statusBio);
    //$(".profile-brief").html('<form><input id="status2" type="text"></input></form>');
    //$("#status2").val(statusBio);
    $(".profile-brief").toggle();
    $("#status").toggle();
}

}）

http://jsfiddle.net/0beocw0o/4/

Answer 4

假设您只需要页面上的这些“可编辑div”之一，上述所有答案都可以正常工作，因为它们会更新每个“profile-brief”元素的文本。此版本是纯JQuery，可为您选择的每个元素独立工作。

http://jsfiddle.net/0beocw0o/5/

function fnEditableText(e) {
    $(this).unbind('click')
    .html('<input id="status" type="text"/>');

    $(this).find('#status').keypress(function(e) {
        if(e.which == 13) {
            var objTxt = $(this).parent();
            objTxt.html($(this).val());
            objTxt.click(fnEditableText);
        }
    });
}

$(document).ready(function() {
    $('.profile-brief').click(fnEditableText);
});

替换输入输入字段上的文本

4 个答案: