有沒有辦法捕捉對textarea的更改？

以下是我與現在有沒有辦法捕捉對textarea的更改？

$("#text").on("input", function(event){ 

    console.log("The changes are:" + SomeDataThatIDontKnowHowToAccess); 

});

我意識到，這可能爲退格/粘貼在文本/插入/刪除打破工作。我真的不知道如何處理，也許有刪除/插入/重寫事件......我寧可不推出我自己的解決方案。

爲例

用戶糊劑something在空白文本區域

{eventType:'insert', value:'something'}

在控制檯顯示了

來源

2012-09-25 John

變化爲用戶進行編輯，或當他們這樣做，離開textarea的？ – j08691

@ j08691隨着用戶進行編輯。 – John

您可以嘗試捕獲所有按鍵並在x間隔上顯示更改。 – jholloman

嘗試此

//該事件可以是當textarea失去焦點時使用

$("#text").on("change", function(event){ 

    console.log("The changes are:" + $(this).val()); 

});

//可以使用此事件用戶開始輸入和按鍵presed

$("#text").on("keyup", function(event){ 

     console.log("The changes are:" + $(this).val()); 

    });

$("#text").on("input", // Here input is not a event you are supposed to used

//嘗試使用更改事件，而不是..

來源

2012-09-25 19:18:46

這些不是變化，這是新的價值 –

如果你需要獲得當前值，你需要使用keyup事件

$("#text").on("keyup ", function(event){ 
    console.log("The changes are:" + $(this).val()); 
});

來源

2012-09-25 19:21:09

寫舊值一些你可以堅持的重點地方。然後你可以使用自己的邏輯在change事件尋找新的舊的和值

$('#text').on('focus', function() { 
    //THIS LINE IS INCORRECT [what was wrong with my fiddle]... assignment is parameter *doh* 
    //$(this).data('oldValue') = $(this).val(); 
    //THIS IS THE CORRECT LINE 
    $(this).data('oldValue', $(this).val()); 
}).on('change', function() { 
    alert('Old Value: ' + $(this).data('oldValue') + '\nNew Value: ' + $(this).val()); 
});

小提琴之間的差異爲雅：http://jsfiddle.net/BLSully/jqbAr/1/ [固定]

來源

2012-09-25 19:23:20 BLSully

我認爲你的小提琴壞了，我始終得到'undefined'舊價值。 – John

@johnthexiii：就這樣。固定。對不起 – BLSully

兩件事情你必須在這裏做。首先，你必須緩存最後一個值。這樣，當新的價值出現時，你有什麼要比較它。

其次，你需要看看（和下載）一string diff function made available by John Resig。你會得到diff的輸出到div的html中。結果看起來很棒。

然後，您的解決方案應該是這樣的：

$("#text").data('lastvalue', $("#text").val()); 
$("#text").on("input", function(event){ 
    var diff = diffString($("#text").data('lastvalue'), $("#text").val()); 
    $('#changesdiv').html("The changes are:" + diff); 
    $("#text").data('lastvalue', $("#text").val()); 
});

更新

我固定在腳本中的一些錯誤，並得到了在http://jsfiddle.net/m3KAa/6/

恕我直言運行的jsfiddle，這diffString功能真的很棒。

來源

2012-09-25 19:25:08

+1：提及Resig的diff功能 – BLSully

@BLSully這是一個非常好的功能。看看組裝好的jsfiddle，看看結果顯示效果如何。 –

有沒有辦法捕捉對textarea的更改？

回答

相關問題