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
});
Related
Is anybody else having problems with the keyup event in iOS 9 not firing?
Just a simple test bed replicates the issue for me.
<input id="txtInput" />
Vanilla JS:
document.getElementById('txtInput').onkeyup = function () {
console.log('keyup triggered');
}
jQuery:
$('#txtInput').on('keyup', function () {
console.log('keyup triggered');
});
Neither fire...
I suggest using the keypress event on browsers with touch screens. I know that you can't really detect touch screen screens, though, so it leaves you with a few options that your situation will likely dictate.
Attach both events keyup and keypress. This would likely be dependent on how much processing is going on and if you are getting double-fires in some browsers.
Attempt to determine whether the browser is a touch screen (like using Modernizr), and then attach a fallback handler like change.
Either way, you end up with two event listeners.
$('#yourid').bind('keypress', function(e) {
// This will work
});
It's not pretty, but a work around is to bind to keydown to capture which key has been pressed, and input if you want to obtain the value, including the key typed:
(function () {
var keyCode;
$('#txtInput')
.on('keydown', function (e) {
// value not updated yet
keyCode = e.keyCode;
// Enter key does not trigger 'input' events; manually trigger it
if (e.keyCode === 13) $(this).trigger('input');
})
.on('input', function (e) {
console.log(keyCode, this.value);
});
}());
If you type 'a' the following occurs:
keydown fires.
e.keyCode is set to the ASCII value of the key pressed.
this.value is '' (i.e. the same before 'a' has been typed).
input fires.
e.keyCode is undefined.
this.value is 'a'.
You can also manually trigger an input event if the enter (13) key is pressed; input isn't fired by this key by default.
I want to trigger a blur within a keypress. IE10 works differently from Chrome/FF. It appears that IE will finish the keydown handler before calling the blur handler, whereas Chrome and FF will trigger the blur handler right when the blur occurs and then go back to finish the keypress handler.
I'm wondering if this is a bug and if there is a good workaround in IE to work like Chrome and FF.
See the code below.
$(document).ready(function () {
document.getElementById("txtInput").addEventListener('blur',
function (event) {
console.log('blur');
});
document.getElementById("txtInput").addEventListener('keydown',
function (event) {
console.log('down 1');
document.getElementById("txtInput").blur();
console.log('down 2');
}
);
});
http://jsfiddle.net/244raf1u/
Output from Chrome:
down 1
blur
down 2
Output from IE
down 1
down 2
blur
Try this:
$(document).ready(function () {
$("#txtInput").blur(function (event) {
event.preventDefault();
console.log('blur');
});
$("#txtInput").keypress(function (event) {
console.log('down 1');
$(this).blur();
console.log('down 2');
});
});
Check out the changes I made in this updated fiddler here.
I had to change the way you were calling the blur() trigger, and then added a simple event.preventDefault() in the blur() handler to prevent a second firing in IE. It seems like IE was trying to move focus off of that input after running the keypress handler.
Also by using this notation: ($("#txtInput")[0]) you are actually referring to the original element object and not the jQuery object, which may be causing issues in IE where the other two are catching the error.
Hopefully this will help!
I found a couple solutions. First is to use the focusout instead of blur. Blur doesn't bubble, focusout does. Not sure why that matters, but the events are probably implemented differently. Unfortunately, that's not an option for me.
The other solution was to have two keydown handlers. The first triggers the blur and anything I want to happen before the blur. The 2nd handler does the processing after the blur, but I have to set a 50ms timeout because all keydown handling occurs before the blur handling.
I have an keyup handler. I want something to happen every time I press ESC except when I'm inside a "Choose File..." window.
Here is a jQuery sample code of what I need:
$(document).bind('keyup', function(e) {
if (e.keyCode == 27) {
if (!IsChooseFileDialogBoxOpen())
doSomething();
}
});
How can I do that?
Thanks
You can't do that, per-say. But what might be able to do is switch to use the keydown or keypress events instead of keyup. Then when the user presses ESC with the file dialog open, the keydown event is caught by the dialog and not sent to your JS, so the callback never fires.
Check it out here: http://jsfiddle.net/sHKjb/
I tested this in FF, did not do any further testing for Chrome, IE, etc.
It appears that event.stopPropagation() in a checkbox click event prevents the associated change event from firing in IE before IE9.
(The following code is in jsFiddle)
<input type="checkbox" value="Y" checked>Test
<div id="output">Logging...</div>
With the following jquery block the change event doesn't fire in IE8 and earlier but it does fire in IE9 (and Chrome):
$(document).ready(function() {
$("input").click(function(event) {
event.stopPropagation();
$("#output").append("<pre>click</pre>");
});
$("input").change(function(event) {
$("#output").append("<pre>change</pre>");
});
});
Chrome and IE9 give:
Logging...
change
click
change
click
change
click
Whereas IE8 and earlier gives:
Logging...
click
click
click
However, if I put specific 'before IE9' handling then all works as expected:
With the following jquery block:
$(document).ready(function() {
$("input").click(function(event) {
event.stopPropagation();
$("#output").append("<pre>click</pre>");
// fix event bubbling before IE9
if ($.browser.msie) {
if (parseInt($.browser.version, 10) < 9) {
$(this).trigger("change");
}
}
});
$("input").change(function(event) {
$("#output").append("<pre>change</pre>");
});
});
Is this expected behaviour?
This is a well-known IE8 bug which has nothing to do with event bubbling: the change event only fires on checkboxes when the focus leaves them.
(Compiling the comments on Tgr's answer so I can accept an answer.)
If the "event.stopPropagation()" line is removed from the click event the change event is fired as expected in IE8, so this isn't the well-known IE8 bug mentioned by Tgr.
#Tgr confirmed that:
jQuery tries to normalize most browser quirks, including this one: it simulates a change event on click and eats the one fired on blur (see jQuery.event.special.change). stopPropagation probably interferes with that.
I have a piece of javascript which is supposed to latch onto a form which gets introduced via XHR. It looks something like:
$(document).ready(function() {
$('#myform').live('submit', function() {
$(foo).appendTo('#myform');
$(this).ajaxSubmit(function() {
alert("HelloWorld");
});
return false;
});
});
This happens to work in FF3, but not in IE7. Any idea what the problem is?
The submit event is not currently supported by Events/live.
Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
Currently not supported: blur, focus, mouseenter, mouseleave, change, submit
How are you excuting the submit? Can you try this instead?
$(':submit').live('click', function(e) {
$(foo).appendTo('#myform');
$('#myform').ajaxSubmit(function() {
alert('Hello World');
});
e.preventDefault();
return false;
});
Re CMS above, in JQuery 1.4, live is supposed to work with 'submit', but seems to still not with IE7. I'm going to try delegate instead and see if that helps.