1

这是我现在正在使用的

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

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

});

我意识到这可能会破坏文本/插入/删除的退格/粘贴。我真的不知道如何处理，也许有删除/插入/覆盖事件......我宁愿不推出自己的解决方案。

一个例子

用户粘贴something到空白文本区域

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

出现在控制台中

4

4 回答 4

1

将旧值写入您可以坚持专注的地方。然后您可以在事件中使用自己的逻辑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-25T19:23:20.660 回答
1

你必须在这里做两件事。首先，您必须缓存最后一个值。这样，当新值进来时，你就有了与之比较的东西。

其次，您需要查看（并下载）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-25T19:25:08.593 回答
0

如果您需要获取当前值，则需要使用 keyup 事件

$("#text").on("keyup ", function(event){
    console.log("The changes are:" + $(this).val() );
});
于 2012-09-25T19:21:09.140 回答
0

尝试这个

// 当textarea失去焦点时可以使用这个事件

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

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

});

// 这个事件可以用于用户开始打字并且按键被按下

 $("#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-25T19:18:46.197 回答