Events on children of contenteditable element

后端 未结 3 1857
故里飘歌
故里飘歌 2021-01-19 17:05

I have

myDiv.bind(\'keypress\', \'> *\', function(event) { console.log(\'keypress\') });

but it does not seem to work.

myDiv is

相关标签:
3条回答
  • 2021-01-19 17:33

    This is barely possible with contenteditable seeing as the elements do not hold input like events and therefore do not have real focus, so you can't actually determine the event.target. The event.target will always be the container that has the attribute contenteditable="true".

    However you can use the DOMCharacterDataModified event like the example & demo below.

    $('#test').on('DOMCharacterDataModified',  function( event ) {
        if($(event.target).parent().attr('id') === 'test') { // Reference 1 
            alert('modified');
        }
    });
    

    Demo: http://jsfiddle.net/nb5UA/15/

    Reference 1: The if statement is checking that the event.target is a direct child of the #test container.

    The browser support for DOMCharacterDataModified is not bad. < IE9 is not supported, and I can't find much info on the event so if anyone has a good resource for it, please share in the comments.

    0 讨论(0)
  • 2021-01-19 17:55

    Keypress event will bubble up to the container element, so you don't necessarily need bind to the children. Instead bind only to the container, than you can check which element was edited by accessing to the event.target property.

    $('#container').on('keypress', function (event) { alert(event.target) });
    
    0 讨论(0)
  • 2021-01-19 17:58

    The issue may not be the selector, but rather that the <div id="test"> is always the event.target.

    $('#test').on('keypress', function (e) {
        console.log(e.target);
    });
    

    With this, at least in Chrome, the console just logs:

    <div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
    <div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
    <div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
    <div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
    <div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
    <div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
    ...
    
    0 讨论(0)
提交回复
热议问题