Develop Reference

How to track inputs on a form with IE

I've alredy achieve that by doing:
$('#myforn:input').on("input", myMethod);
However, this method is not supported IE.
Another approach is proposed in other topics is something like this:
$('#myForm').on('propertychange input', function(ev){
myMethod()
});
Which doesn't work when there is input on my form neither.
So how could I achieve that?

This is what you are looking for:
$('#myForm').on('change', 'input', function () {
console.log(this, ' input was changed.')
});
If you also have textarea or select inputs, your code should use input, textarea, select:
$('#myForm').on('change', 'input, textarea, select', function () {
console.log(this, ' input was changed.')
});
Some inputs (like textareas) send the change notification only when they lose focus. You may want to use the keyup, keydown or keypress events too:
$('#myForm').on('change keyup keydown keypress', 'input, textarea, select', function () {
console.log(this, ' input was changed.')
});

Please always specify which version(s) of IE you're testing with, and also the version of jQuery.
These details are important because jQuery does fully support IE, so your code should work the same in IE as any other browser. If it doesn't then here are a few things to check:
You may be using a version of jQuery that is incompatible with your IE version. If you need to support IE8 or earlier, then you must use jQuery v1.x. jQuery v2 and v3 only support newer IE versions.
Check whether IE is rendering the page in Quirks mode. This will break compatibility with jQuery. Fix the page so that it uses standards mode.

contenteditable div: capture input event, ignore paste event

I'm trying to build a shortcut expander, so when a user types a certain sequence of characters, it's replaced with some longer sentence.
I'm currently using 'input' event to capture contenteditable changes. The issue is, pasting also triggers the 'input' event. I only want the event to fire when user types in a character. Is there any way to do this?

The simplest solution would be to detect a keyboard event (keydown, keyup or keypress) instead of oninput, but which to choose, depends on what the handler actually will do.
If you don't want/can't use keyboard detection, there's a back-gate. It looks like onpaste would fire before oninput (Chrome, FF). Hence you could create a flag for paste, and check it in oninput handler. Something like this:
var pasted = false,
pad = document.getElementById('pad'); // The contenteditable
pad.addEventListener('paste', function (e) {
pasted = true;
});
pad.addEventListener('input', function (e) {
if (pasted) {
pasted = false;
return;
}
console.log('keyboard, cut or drop');
});
A live demo at jsFiddle.
Notice, that oninput is fired also ondrop and oncut as well as onpaste and typing in. If you don't want to handle any of these events in oninput handler, you've to listen all these events, and set a flag accordingly.
As a sidenote, IE doesn't fire oninput on contenteditables. If you want to support IEs, you need to use onkeypdown/up-onpaste-oncut-ondrop combination to achieve something similar to oninput.

IE onpropertychange event doesn't fire

select
<input type="file" id="real-file-input" style="display:none" />
$('#select-handler').click(function(){
$('#real-file-input').click();
});
$('#real-file-input').bind('propertychange', function(){
alert('changed');
});
it's weird that when I use .click() the propertychange won't be fired.

Actually your code works fine in IE7 and 8 for me, whenever I change a value of input type ='file', the alert is fired. Whereas it is not working in >IE9 versions.
From paulbakaus's blog on propertychange on Internet Explorer 9
What’s wrong with propertychange on IE9?
IE9 doesn’t fire non-standard events when binding them through
addEventListener. Every modern JS library that uses feature
detection, including jQuery, will fail (see also:
http://bugs.jquery.com/ticket/8485). “Not a biggie” you say, “simply
use attachEvent directly” you say?
The good news: propertychange fires when using attachEvent. The bad
news: It refuses to fire when modifying any CSS properties on the
element that are unknown to the engine.. “Well this sucks,” you say,
“but I read you can use DOMAttrModified on IE9!” you say?
DOMAttrModified features exactly the same behavior. It does not fire
for unknown CSS properties. This is a complete disaster.
Many developers faces the same weird behavior.
Why do you want to use onpropertychange which is supported only by Internet Explorer?
I would rather move on to change event handler
$('#real-file-input').bind('change', function(){
alert('changed');
});
or if it is a HTML5 then input event handler.
$('#real-file-input').bind('input', function(){
alert('changed');
});

Unfortunately, IE9 doesn't support the "input propertychange" event on deleting. Escape, Delete and Backspace can be easily captured using the "keyup" event with event.which, but the selection of a text and deleting through right click -> delete does not fire the events propertychange, change, select or keyup/keydown.
I found no solution so far for this problem.
here's my code:
$('#search_input').on("propertychange input", function(event){
console.log('propertychange event');
// trigger search
});
$('#search_input').on("keyup", function(event){
console.log('keyup event', event.which);
if(event.which === 27) { // on ESC empty value and clear search
$(this).val('');
// trigger search
} else if(event.which === 8 || event.which === 46) { // trigger search on Backspace
// trigger search
}
});
$('#search_input').on("change input", function(event){
console.log('change event');
// trigger search
});
$('#search_input').on("select input", function(event){
console.log('select event');
// trigger search
});

Form reset event doesn't fire in IE

This function fires in firefox/chrome :
$(document).on("reset", "form", function(){
alert("working");
});
What alternatives are out there for IE (I have 8 installed so I'd like to make it work from 8 onwards).

Try attaching the event handler directly to your form:
$(document).ready(function(){
$("form").bind("reset", function(e) {
alert("working");
});
});
This apparently works for multiple browsers including IE8.
Your method may not be working because of how IE8 handles event propagation... From jQuery documentation:
In Internet Explorer 8 and lower, the paste and reset events do not bubble. Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event.

onpropertychange event vs keyup

I'm trying to mimic Google suggestions over here: yous-design
It works perfect in Chrome/Firefox etc. but not in IE. I googled for it and it turns out that IE doesn't support the oninput event which in the code looks like this:
el("inp").oninput=function(){
addScript("http://www.google.nl/complete/search?callback=suggest&q="+this.value);
}
Instead I would have to use the onpropertychange event for IE. But when I replace the event it still doesn't work. I think this piece of code is counteracting:
$('#inp').keydown(
function (e){
var curr = $('#test').find('.current'); etc.etc.etc.
I think the keydown(/keyup) is counteracting with the onpropertychange event. But what should I replace keydown/keyup with? Are there any other alternatives at all? Should I rewrite the code?

I would suggest that instead of onpropertychange, use onKeyUp on IE.
onpropertychange is buggy in IE and doesn't fire for all keys (delete and backspace I think).