使用jquery編輯帶有用戶輸入的段落

這是一個類似於CRUD系統的編輯功能，但其想法是簡化當用戶通過單擊或雙擊某個項目時，它將直接轉換爲字段更新數據..使用jquery編輯帶有用戶輸入的段落

演示here

的問題是我不能輸入任何東西到現場，我不知道爲什麼......

的Html

<li style="list-style:none">click here to edit</li>

jQuery的

$(document).ready(function(){ 

$('li').click(function(){ 
    $(this).html("<input id='input' type='text'>"); 
}); 

$('#input').blur(function(){ 
    var newVal = ('#input').val(); 
     $('li').text('newVal'); 
    }); 
});

來源

2013-08-01 cgpa2.17

jEditable插件？ http://www.appelsiini.net/projects/jeditable/default.html – tonoslfx

這是一個很好的插件來做這樣的事情。看看它是否適合你的目的。 http://vitalets.github.io/x-editable/index.html – azzy81

@tonoslfx他幾乎有它的工作，爲什麼在html5 contenteditable會做的時候用插件膨脹一切。 – Parrotmaster

這是因爲點擊文本框也是點擊'li'。因此，當您單擊現有文本框時，它會添加一個新的文本框。

這裏是工作提琴：http://jsfiddle.net/DNmNE/5/

，代碼：

$(document).ready(function(){ 
    $('li').click(function(){ 
     input = $("<input id='input' type='text'>").blur(function(){ 
      $('.editable').removeClass('editable'); 
      var newVal = $(this).val(); 
      $('li').text(newVal); 
     }); 
     if (!$(this).hasClass('editable')) 
      $(this).addClass('editable').html(input); 
    }); 
    });

我用.editable類檢測一個文本框已經打開。

來源

2013-08-01 13:56:33

請再加上'input = $（「」）。 ......代碼。 – Stano

@Stano至少說明原因... – Parrotmaster

a）輸入是一個變量？ –

那麼我的AMIGO，要附加一個新的輸入每次你點擊，所以你需要鍵入真正的快速（開個玩笑）。但那是問題所在。鬆開li點擊功能。

來源

2013-08-01 13:55:59 JonathanRomer

只是一個想法，但你有沒有考慮過使用HTML5contenteditable功能？

http://html5demos.com/contenteditable

顯然，它不會在過時的瀏覽器工作，但如果你不說，有關然後根據您的應用程序的增長它會爲你節省大量的工作。

來源

2013-08-01 13:57:13

是非常好的，但使用localstorage。 – Parrotmaster

爲什麼這是一個問題？不是爲什麼*可能會成爲一個問題，但爲什麼它會成爲@Nurul例子中的問題？ –

我的整個項目幾乎在jQuery中，有沒有什麼類似於HTML5的contenteditable可以在jQuery中完成？或者定製邏輯也許？本地存儲是 –

使用jquery編輯帶有用戶輸入的段落

回答

相關問題