JQuery現場編輯，無插件

我試圖使用Jquery（無插件）來啓用編輯到位控件。我想要的功能就是這個。單擊段落時，該段落將被轉換爲可編輯的文本區域。一旦用戶點擊了段落（失去焦點），文本將被保存。JQuery現場編輯，無插件

我具有低於下面的代碼和當前部分1正在工作，但是當我點擊在可編輯區textarea的行數=「10」 COLS =「160獲取生成和我不能鍵入。這裏是我

$("#Para1").click(function() { 
      var textarea = '<div><textarea rows="10" cols="160">' + $(this).html() + '</textarea>'; 
      $(this).html(textarea); 
      $("textarea.textarea").focus(); 

      $("textarea.textarea").blur(function() { 
       var value = $(this).val(); 
       $("#Para1").text(value); 

      });

我試圖立足每下面的鏈接我的代碼，但都沒有成功。

http://www.unleashed-technologies.com/blog/2010/01/13/jquery-javascript-easy-edit-place-input-boxes-and-select-boxes

來源

2013-08-19 CSharper

我將解決這個使用2- html元素，其顯示出/必要時隱藏：

<div id="Para1">blabla</div> 
<textarea id="editable" style="display:none" rows="10" cols="160"></textarea>

然後使用下面的JavaScript：

$("#Para1").click(function() { 
    $('#editable').html($(this).html()).show().focus(); 
    $(this).hide(); 
}); 

$("#editable").blur(function() { 
    $('#Para1').html($(this).val()).show(); 
    $('#editable').hide(); 
});

編輯：移動單擊處理程序上 '允許#editable' 的 '＃PARA1' click處理程序之外。無需連接多次。更新小提琴here。

例如JsFiddle可以找到here。

來源

2013-08-19 19:33:10

謝謝我會實現這個 – CSharper

完美，你會在這種情況下，請將此答覆標記爲最終回答？ :) –

你可以使用HTML5 CONTENTEDITABLE =「真」

<p contenteditable="true"> 
    Lorem ipsum 
</p>

下一頁上this post解釋，以節省德數據，你應該附加一個處理程序段的事件模糊。

來源

2013-08-19 19:22:32 Carlos487

$("#Para1").click(function() { 
    var textarea = '<div><textarea class="editable" rows="10" cols="160">' + $(this).html() + '</textarea>'; 
    $(this).html(textarea); 
    $("textarea.editable").focus(); 

    $("textarea.editable").blur(function() { 
     var value = $(this).val(); 
     $("#Para1").html(value); 

    }); 
});

您沒有在生成的html中爲您的textarea分配類。但是，您正在通過.textarea類引用它。我添加了一個可編輯類，並將您的引用更改爲textarea.editable。

來源

2013-08-19 19:22:34

嘗試此

http://jsbin.com/UmelOku/1/edit?html,js,output

下面是代碼 JS：

$("#Para1").click(function() { 
    $(this).css('display','none'); 
    $('textarea').css('display', 'block'); 
    $('textarea').val($(this).text()); 
    $('textarea').focus(); 
}); 

    $('textarea').blur(function() { 
    var value = $(this).val(); 
    $("#Para1").text(value); 
    $(this).css('display','none'); 
    $('#Para1').css('display', 'block'); 
    });

HTML：

<p id="Para1">Test</p> 
<textarea style="display:none;" rows="10" cols="160"></textarea>

來源

2013-08-19 19:32:48

感謝您的建議我要去標記埃裏克的答案只是因爲它的一個小清潔，如果我可以標記2我會 – CSharper

JQuery現場編輯，無插件

回答

相關問題