當點擊改變到文本區域時，當外部點擊改回

我試圖做一個像PHPadmin這樣的函數，它們在顯示錶格時使用什麼，當點擊div字段時，改變爲文本區域，當點擊在div之外，將其更改回div域。下面的代碼是錯誤的，當我點擊外部時，我不能更改回div域。請幫助我改進代碼。當點擊改變到文本區域時，當外部點擊改回

JS：

$('#editor #gird_edit').bind({ 
    click: function() { 
      $(this).html('<textarea id="gird_edit">'+$(this).text()+'</textarea>'); 
    }, 
    blur: function() { 
      $(this).html('<div id="gird_edit">'+$(this).text()+'</div>'); 
    } 
});

HTML：

<div id='editor'> 
<div id='gird_edit'>hallo world</div> 
<div id='gird_edit'>hallo world 2</div> 
<div id='gird_edit'>hallo world 3</div> 
</div>

我只有8個名譽，我不能投你回來。不過，我衷心感謝您的幫助！

來源

2012-12-22 Till

see jsfiddle

updated jsfiddle

時 $(this).html(textarea)完成

，div已經模糊。這樣的onblur沒有工作

$('#editor #gird_edit').bind({ 
    click: function() { 
     var tex = $(this).text(); 
     var textarea = $('<textarea id="gird_edit">'+tex+'</textarea>'); 
     $(this).html(textarea); 
     textarea.focus(); 
     textarea.blur(function(){ 
      var currentText = textarea.val(); 
      if(currentText == tex)//not change 
       textarea.parent().text(tex); 
      else //changed 
       alert(currentText); 
     }); 
    } 
});

編輯3：

else{ 
    textarea.parent().text(currentText); 
    //something else 
}

找到更多jquery API

來源

2012-12-22 01:48:56 Teifi

謝謝你的回答！ – Till

當更改文本區域內的值後，請單擊外側。該字段將變回原始值。我應該如何重新讀取值？ – Till

@ShinanTillTominaga更新了答案。 – Teifi

當你第一次點擊#gird_edit它是一個div，所以this是一個div，你可以替換它的內容來改變事情。然而，當你模糊了#gird_edit是一個textarea，所以如果你改變它的內容，你並沒有真正改變你想改變的東西（你只是改變你的textarea的內部）。

你想要改變的是圍繞textarea的div，即。該文本區的「父母」。換句話說，嘗試：

blur: function() { 
     $(this).parent().html('<div id="gird_edit">'+$(this).text()+'</div>'); 
}

來源

2012-12-22 01:44:01 machineghost

的問題是什麼樣子，模糊功能將到文本的無反應點擊功能產生的區域。 – Till

檢查this jsbin我只是做了，如果你有什麼事我很樂意幫忙。

來源

2012-12-22 01:44:40

非常感謝！真誠的， – Till

當然，沒問題，我們在這裏幫助，節日快樂！ –

當我點擊相同的文本區域時，它會自動關閉......... – Till

當點擊改變到文本區域時，當外部點擊改回

回答

相關問題