input event not firing in IE10 or IE11? #394

Closed
pascalpp opened this Issue Feb 3, 2015 · 1 comment

Comments

Projects
None yet
1 participant
@pascalpp
Contributor

pascalpp commented Feb 3, 2015

For me, the inputis not firing on mediumedtior in IE11.

According to this: https://connect.microsoft.com/IE/feedback/details/794285/ie10-11-input-event-does-not-fire-on-div-with-contenteditable-set, the input event doesn't fire on any contenteditables (not just mediumeditor) in IE10 or IE11:

I've confirmed this in my IE11 VM using the fiddle mentioned on the above page: http://jsfiddle.net/7VQxd/

But the ReadMe for this project says that the input event should work in IE9+. Anyone else having this issue?

@pascalpp pascalpp changed the title from `input`event not firing in IE10 or IE11? to input event not firing in IE10 or IE11? Feb 3, 2015

@pascalpp

This comment has been minimized.

Show comment
Hide comment
@pascalpp

pascalpp Feb 3, 2015

Contributor

It appears that the input event is supported on text inputs and textareas in IE9+, but not contenteditables. I ended up using this snippet from http://stackoverflow.com/questions/1391278/contenteditable-change-events:

$('body').on('focus', '[contenteditable]', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    return $this;
}).on('blur keyup paste input', '[contenteditable]', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
    return $this;
});

which fires a change event on the contenteditable element. Then I just listen for that change event.

Contributor

pascalpp commented Feb 3, 2015

It appears that the input event is supported on text inputs and textareas in IE9+, but not contenteditables. I ended up using this snippet from http://stackoverflow.com/questions/1391278/contenteditable-change-events:

$('body').on('focus', '[contenteditable]', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    return $this;
}).on('blur keyup paste input', '[contenteditable]', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
    return $this;
});

which fires a change event on the contenteditable element. Then I just listen for that change event.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment