As some of you may know already, Internet Explorer's onchange event is fundamentally broken prior to version 9. Instead of triggering when a change occurs, it triggers when the input field loses the focus and has changes.
This lead to various workarounds for checkboxes and radio buttons ("use onclick instead") and text fields ("use keyup instead").
However, I'm having that problem for a file input, and I can't figure out what I do to be notified that a new file has been selected, right after it did, and not when the user clicks elsewhere. I can't attach myself to a mouse event because it's not related to the mouse; and I can't attach myself to a keyboard event because it's not related to the keyboard either.
I'd be willing to use IE-specific stuff if it can solve the problem.
Additional infos:
I use jQuery 1.6 and the live method to attach the event.
$(".upload").live("change", function() { /* stuff here */ });
Use the onFocus event, combined with a check to ensure that there is a value. This works because after the user selects a file and the OS file selection dialog box is removed, focus is returned to the input element.
Related
I'm trying to make a chrome extension with javascript which triggers an action on key presses when I'm typing an email in gmail.
I manage to make the extension, which performs a console log correctly when I press the keys on any page.
My problem comes when capturing the event when I am typing in a gmail email writing input, it doesn't capture the event.
The body text box is a contenteditable div, and the from and subject text boxes are inputs. I don't know if this helps
The JS code I inject is as follows:
document.addEventListener('keydown', function (e){
console.log('push')
});
The code works in the search input of the page but not in the write input of the email.
Does anyone know why?
Using document.addEventListener is probably not the right way to go when adding event listeners.
There's a 90% chance that the keydown event is being directly handled by the contenteditable div and the input elements which prevents it from being handled by the document itself. You may need to attach the event listener directly to the contenteditable div and the input elements (referencing them in some way or another - you can take a look at how MailTrack or some Gmail extension to see how they do it), rather than the document.
You can try opening up inspect element and seeing if the classes or IDs change, and make a decision on how to hook them up to your code using those; and attaching the appropriate event listener to them.
You can also try using event delegation to attach the appropriate event listener to a parent element of the input and contenteditable div; then check the event target to see if it is the element you are interested in - but I won't get into that since it's probably not the best approach to this type of situation.
It's entirely possible - since if another chrome extension can do it, yours can probably do it as well. It just comes down to information collection and the appropriate research.
Recently the following post has helped me simulate a keypress on click:
Definitive way to trigger keypress events with jQuery
I found that the selector $("input") only seems to work if the page has an input that is visible and not disabled.
Is there a way to trigger a keypress on a hidden element or another element that will give the same result (properly trigger the key press event)?
Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behavior, it just does nothing at all when you click on a disabled element.
As showed here, I suggest you to create a trigger element that when clicked show/enable the input temporary, launch a focus/click event as the post you suggested and then hide it again.
I want to know the right event when the user remove focus on a text box. Whether if the user presses tab or clicked to another field. I've seen some solutions like onchange or blur. But it doesn't satisfy all scenarios when the user remove focus. I want to use pure javascript or jquery. Thanks!
jquery focusout() is the best suited in this case
go thought this link
jQuery .focusOut() documentation
I find .focusOut() useful when I'm more specifically concerned with losing focus from a defined input or input group, since it supports event bubbling.
see the demo in http://api.jquery.com/focusout/ it works when user uses tab to focusout or clicks anothoer field
FYI: The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
you can use blur() event.
The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.
I'm working on an HTML5 mobile app (using regular jQuery, not mobile), which implements a custom autocomplete list that appears below a textarea. The user selects an option from the list, the word is autocompleted, and the user continues typing as usual.
The problem is that the user taps outside of the textbox to select an item from the autocomplete, so the textarea momentarily loses focus. Since focus() is deactivated in the android browser, I can't immediately re-focus and retain the caret's last position as I usually would.
Is there a workaround that would allow me to re-focus on a textarea, preserving caret position as regular blur() and focus() calls would?
Edit:
Sources of underlying assumption: mentioned here: https://stackoverflow.com/a/10243010/832607 and here:
http://ambrusmartin.wordpress.com/2012/08/30/soft-keyboards-in-android-iphone-phonegap-applications-when-we-call-focus/ (Already tried solution mentioned in link)
Instead re-focusing the textarea I'd recommend trying to not lose the focus in the first place. I'm achieving this when preventing the default action on mousedown.
Here is the jQuery, assuming list is your list of options and all options have listEl class:
list.on('mousedown', '.listEl', function(e) {
e.preventDefault();
});
I want to catch the event when the user select a text in Firefox page like IDM add-on (or IE8+) show a button when user select text.
Can anyone help me?
You could attach a mouseup event listener and a keypress listener respectively for mouse and keyboard selections, and then use window.getSelection() to tell if any text is selected.
Somewhat surprisingly, there's no simple way to do this. IE has a select event that is implemented on all elements but other browsers have never extended this beyond inputs. You'll have to handle keyup and mouseup events for the whole document, and write some code to compare the current selection with the previous selection from when the event handler last ran.