contenteditable change events

前端 未结 19 2307
粉色の甜心
粉色の甜心 2020-11-22 01:36

I want to run a function when a user edits the content of a div with contenteditable attribute. What\'s the equivalent of an onchange

相关标签:
19条回答
  • 2020-11-22 02:00

    A simple answer in JQuery, I just created this code and thought it will be helpful for others too

        var cont;
    
        $("div [contenteditable=true]").focus(function() {
            cont=$(this).html();
        });
    
        $("div [contenteditable=true]").blur(function() {
            if ($(this).html()!=cont) {
               //Here you can write the code to run when the content change
            }           
        });
    
    0 讨论(0)
  • 2020-11-22 02:01

    Using DOMCharacterDataModified under MutationEvents will lead to the same. The timeout is setup to prevent sending incorrect values (e.g. in Chrome I had some issues with space key)

    var timeoutID;
    $('[contenteditable]').bind('DOMCharacterDataModified', function() {
        clearTimeout(timeoutID);
        $that = $(this);
        timeoutID = setTimeout(function() {
            $that.trigger('change')
        }, 50)
    });
    $('[contentEditable]').bind('change', function() {
        console.log($(this).text());
    })
    

    JSFIDDLE example

    0 讨论(0)
  • 2020-11-22 02:02

    Check this idea out. http://pastie.org/1096892

    I think it's close. HTML 5 really needs to add the change event to the spec. The only problem is that the callback function evaluates if (before == $(this).html()) before the content is actually updated in $(this).html(). setTimeout don't work, and it's sad. Let me know what you think.

    0 讨论(0)
  • 2020-11-22 02:03

    Consider using MutationObserver. These observers are designed to react to changes in the DOM, and as a performant replacement to Mutation Events.

    Pros:

    • Fires when any change occurs, which is difficult to achieve by listening to key events as suggested by other answers. For example, all of these work well: drag & drop, italicizing, copy/cut/paste through context menu.
    • Designed with performance in mind.
    • Simple, straightforward code. It's a lot easier to understand and debug code that listens to one event rather than code that listens to 10 events.
    • Google has an excellent mutation summary library which makes using MutationObservers very easy.

    Cons:

    • Requires a very recent version of Firefox (14.0+), Chrome (18+), or IE (11+).
    • New API to understand
    • Not a lot of information available yet on best practices or case studies

    Learn more:

    • I wrote a little snippet to compare using MutationObserers to handling a variety of events. I used balupton's code since his answer has the most upvotes.
    • Mozilla has an excellent page on the API
    • Take a look at the MutationSummary library
    0 讨论(0)
  • 2020-11-22 02:04

    const p = document.querySelector('p')
    const result = document.querySelector('div')
    const observer = new MutationObserver((mutationRecords) => {
      result.textContent = mutationRecords[0].target.data
      // result.textContent = p.textContent
    })
    observer.observe(p, {
      characterData: true,
      subtree: true,
    })
    <p contenteditable>abc</p>
    <div />

    0 讨论(0)
  • 2020-11-22 02:06

    In Angular 2+

    <div contentEditable (input)="type($event)">
       Value
    </div>
    
    
    @Component({
      ...
    })
    export class ContentEditableComponent {
    
     ...
    
     type(event) {
       console.log(event.data) // <-- The pressed key
       console.log(event.path[0].innerHTML) // <-- The content of the div 
     }
    }
    
    
    
    0 讨论(0)
提交回复
热议问题