Trigger keypress event with jQuery on a hidden input - javascript

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.

Related

Javascript event when user removes focus on textbox

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.

JavaScript events on related elements

I am wondering is the following behavior correct.
I have a label element linked to an input element via the "for" attribute, should this yield two click events on a single user click on the label? Specifically, put a click listener on window. Then, define checkbox with a label element linked to it using attribute "for". Click on the label text. The result is that checkbox will be checked and you will see two click events. http://jsfiddle.net/k55uD/2/
If this behavior is correct, are there more such cases, attributes, or whatever? Some spec would be nice.
Any help is appreciated.
P.S. I update the post with the example.
Clicking the label will trigger any onclick function attached to that label and any onclick attached to the input itself. Clicking the input will trigger only the onclick for the input.
This is very easy to test. See here:
http://jsfiddle.net/zptw3/
The DOM would treat each element separately, so both the label and the element it is 'for' can have event handlers defined. So yes, if both elements have an onclick handler and the click is within each element, both events will fire.
However this is something you have to define, you don't get a second click by default on the label just because it is 'for' the other element.
Basically, it is up to you - you can set it up to raise two events or a single event but out of the box you will get one event raised for the element you defined the handler on.
This explains events and event order pretty well, as well as offering some advise about browser quirks.
http://www.quirksmode.org/js/events_order.html
EDIT:
If you Specifically, put a click listener on window. Then you will get both events due to propagation, again this is explained in the link provided.

How can I make a jquery styleBox trigger when focused using tab?

I have some styleBox elements that aren't triggering when I tab through the items. Does the change() also get triggered on focus?
From the jQuery documentation for .change():
For select boxes, checkboxes, and radio buttons, the event is fired
immediately when the user makes a selection with the mouse, but for
the other element types the event is deferred until the element loses
focus.
See here for details.
May be better to use .focus() if you can.

How Google detects input in search box to display instant results?

How is Google detecting user input? I looked around and the text field does not have the onkeyup or onchange events.
Is there any other way to detect user input in a text field?
it does have keyup and keydown listeners, but they are assigned at runtime, via addEventListener("keyup", ...). Use your browser's DOM inspector to select the input element, and then drill into the event listeners currently assigned (in webkit's inspector, that's under "Event Listeners" at the bottom of the right-hand pane) -- you'll see keyup, keydown, and several others.
It does have event listeners. Using the inspect element on chrome you can clearly see the listeners - highlighted in the screen shot below.
The same principle as autocomplete:
http://www.javascript-examples.com/autocomplete-demo/
I would say an onblur onkeyup/down event that triggers a custom event that waits for a pause or space, then sends the data, then handles the return.
After playing with it for a while here is what I came up with at jsfiddle:
http://jsfiddle.net/fauxtrot/Ejqyb/

How to capture the user select text event in Firefox

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.

Categories