web-dev-qa-db-fra.com

Comment détecter un événement de changement de contenu sur un div

J'essaie de faire un éditeur tout fonctionne bien jusqu'à présent, mais maintenant je dois faire un gestionnaire qui pourrait détecter toute modification apportée dans un div ou tout contenu modifié dans le div

<?php $row="testing content" ?>
<!-- my editor section-->
<div id="editor">
    <div id="options">
        <span><a id="iimg">Insert Image from gallery</a></span>
        <span>Upload image to gallery</span>
        <span><a id="iheading">Heading</a></span>
    </div>
    <div id="product_descriptioncontent" contenteditable="true"><?php echo $row; ?>
    </div><!-- viewable editor -->
    <input type="hidden" name="textareacontent" value="" id="textareacontent" >
    <!-- hidden field to submit values -->
</div>
<!-- end of editor section -->
<div id="imc"></div> <!-- image gallery loading section -->

<script>
$(document).ready(function(){

    $('#iheading').click(function(){
    $('#product_descriptioncontent').append('<h1>Heading</h1>');
    });

    $('#iimg').click(function(){
        $('#imc').load('imagegallery.php',function(){
        $('#gallery img').on('click',function(){
            $('#product_descriptioncontent').append('<img  src="http://localhost/sites/site_pics/otherpic/1.png"><br>&nbsp;');
    });
    });
    });
    $('#product_descriptioncontent').change(function(){
    alert("pppp");// how to capture this event
    });
});
</script>

J'ai placé un peu de mon code sur jsfiddle http://jsfiddle.net/bipin000/UJvxM/1/ merci pour votre précieux temps

javascriptjquerydomhtml
14
Bipin Chandra Tripathi

Aimes-tu ça? http://jsfiddle.net/Ralt/hyPQC/

document.getElementById( 't' ).onkeypress = function( e ) {
    var evt = e || window.event
    alert( String.fromCharCode( evt.which ) )
}​

Il n'attend pas un événement change, c'est un peu inutile.

Au lieu de cela, il écoute l'événement onkeypress. Chaque fois qu'un utilisateur modifie le contenu de ce div (en lui ajoutant un caractère), il déclenche l'événement.

Vous pouvez également voir comment cliquer sur le caractère (à l'aide de String.fromCharCode( evt.which )).

PS: une solution jQuery complète pour votre cas spécifique serait la suivante:

$( '#product_descriptioncontent' ).on( 'keypress', function() {
    $( '#your-hidden-input' ).val( $( this ).text() )
    // Or
    $( '#your-hidden-div' ).text( $( this ).text() )
} )
4
Florian Margaine

Essayez ceci exemple , vous pouvez lier un événement personnalisé au div et déclencher cet événement lors du changement

2
Alon Eitan

Essayez d'ajouter un gestionnaire pour DOMCharacterDataModified . Pourrait être une solution plus propre.

2
mihai