0

在 gmail 网络聊天或任何其他网络聊天中，我们如何检测输入了一些新文本

在 gmail 中，这些是我执行检查元素时的属性

  <div chat-dir="f" class="km" role="chatMessage" aria-live="assertive">
  <div class="kk">
  ...
  ...
  </div>
  </div>

  <div chat-dir="t" class="km" role="chatMessage" aria-live="assertive">
  <div class="kk">
  ...
  ...
  </div>
 </div>

我使用了以下内容，但没有看到 alert()。由于文本附加到以前的一些 html 中，我们如何获取聊天数据进行处理

$("div.km").bind("DOMSubtreeModified", function() {
  alert("tree changed");
});

或者我们可以使用 chat-dir 属性来获取数据

EDIT 1:

我为 gmail 聊天尝试了以下内容，即使我没有看到 alert()

$(".AD").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});
$("div.kk").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

$('div.kk').on('webkitAnimationEnd animationend', 'div', function(e){
    console.log(e.target.tagName.toLowerCase() + ' added!');
    alert("heree")
});


$(document).ready(function() {
  alert("hello world in ready");  
    $('div.no').on('webkitAnimationEnd animationend', 'div', function(e){
        console.log(e.target.tagName.toLowerCase() + ' added!');
        alert("heree")
});
$('div.no').change(function() {
    alert('Handler for .change() called.');
});
$('div.kk').change(function() {
   alert('Handler for .change() called.');
});
$('.kk').change(function() {
  alert('Handler for .change() called.');
});
alert($('.kk').val());
$('km').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
if (event.type == 'DOMNodeInserted') {
    alert('Content added! Current content:' + '\n\n' + this.innerHTML);
} else {
    alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
}
});
});
4

1 回答 1

1

最简单的方法（尽管它只适用于那些支持 CSS 的浏览器@keyframes）是使用 CSS 动画来为新添加的内容设置动画（但很简短），并检测animationend（或在 Webkit 中为 camel-cased WebkitAnimationEnd）事件，简单的概念验证，带有以下 HTML：

<button id="add">Add more content</button>
<div id="holder"></div>

jQuery：

$('#holder').on('webkitAnimationEnd animationend', 'div', function(e){
    console.log(e.target.tagName.toLowerCase() + ' added!');
});

$('#add').click(function(){
    var addTo = $('#holder');
    $('<div />', {text: addTo.children().length})
    .appendTo(addTo);
});

CSS：

@-webkit-keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes newContentAdded {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#holder div {
    /* Firefox */
    -moz-animation: newContentAdded;
    -moz-animation-iteration-count: 1;
    -moz-animation-duration: 0.1s;
    /* Chrome, Chromium, Webkit (future-opera?) */
    -webkit-animation: newContentAdded;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.1s;
}

JS 小提琴演示。

参考：

于 2013-03-22T12:23:27.007 回答