如何在輸入關鍵事件上傳遞「this」？

Question

我認爲這是一個語法問題，但我似乎無法找到答案，我正在尋找的問題。有很多是...接近。可能是有約束力或「適用」的東西，但我無法弄清楚如何在這種情況下使用它們。

我有一個函數，當被觸發時，將一個跨度變成一個輸入，以便它可以被編輯。然後，當焦點關閉（模糊）時，新文本被保存。到目前爲止，它的工作原理與我想要的完全一樣我認爲如果輸入密鑰會做同樣的事情會很好，但我無法弄清楚如何使事件起作用。

function span_into_textarea() { 
    var old_text = $(this).text(); 
    var editableText = $("<input type='text' />"); 
    editableText.val(old_text); 
    $(this).replaceWith(editableText); 
    editableText.focus(); 
    editableText.blur(textarea_into_span); 
    editableText.keypress(function (e) { 
     if (e.which == 13) {textarea_into_span()} 
    }); // THIS DOESNT PASS ANYTHING TO "THIS" 
    editableText.keypress(textarea_into_span); //THIS WORKS BUT I CAN'T KNOW WHICH KEY WAS PRESSED 
} 

function textarea_into_span() { 
    var new_text = $(this).val(); 
} 

感謝您的幫助！

Answer 1

您可以使用call傳遞this參考：

editableText.keypress(function (e) { 
    if (e.which == 13) {textarea_into_span.call(this)} //will refer to editableText 
}); 

Answer 2

1. 您可能會bind：editableText.keypress(textarea_into_span.bind(this))（事件作爲參數傳遞）。

2. 您可以用arrow function替換textarea_into_span（它們不與this因此被父上下文擡頭）：

   editableText.keypress((e) => { 
       if (e.which == 13) { 
       var new_text = $(this).val(); 
       } 
   }) 
   

3. 正如@Mouser建議您可以使用call或apply：

   editableText.keypress(function(e) { 
       if (e.which == 13) { 
       textarea_into_span.call(this); 
       // or textarea_into_span.apply(this) 
       } 
   }) 
   

Answer 3

試試這個方法，你正在失去範圍：

function span_into_textarea() { 
    var modify = this; 
    var old_text = $(this).text(); 
    var editableText = $("<input type='text' />"); 
    editableText.val(old_text); 
    $(this).replaceWith(editableText); 
    editableText.focus(); 
    editableText.blur(textarea_into_span(modify)); 
    editableText.keypress(function (e) { 
     if (e.which == 13) {textarea_into_span(modify)} 
    }); 
} 

function textarea_into_span(modify) { 
    var new_text = $(modify).val(); 
}