Asked  7 Months ago    Answers:  5   Viewed   84 times

What is the best way to simulate a user entering text in a text input box in JS and/or jQuery?

I don't want to actually put text in the input box, I just want to trigger all the event handlers that would normally get triggered by a user typing info into a input box. This means focus, keydown, keypress, keyup, and blur. I think.

So how would one accomplish this?

 Answers

54

You can trigger any of the events with a direct call to them, like this:

$(function() {
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
});

Does that do what you're trying to do?

You should probably also trigger .focus() and potentially .change()

If you want to trigger the key-events with specific keys, you can do so like this:

$(function() {
    var e = $.Event('keypress');
    e.which = 65; // Character 'A'
    $('item').trigger(e);
});

There is some interesting discussion of the keypress events here: jQuery Event Keypress: Which key was pressed?, specifically regarding cross-browser compatability with the .which property.

Tuesday, June 1, 2021
 
SilverHorn
answered 7 Months ago
30

Assuming browser that supports the event:

  1. The real event can support any document. jQuery will only use the document it was loaded in, no matter what you pass to it.
  2. jQuery will fire the event asynchronously even if the event has already happened. Attaching 'DOMContentLoaded' event will do nothing if the event has already happened.

There is no delay in these browsers, see http://jsfiddle.net/rqTAX/3/ (the offsets logged are in milliseconds).

For browsers that don't support the event, jQuery's will obviously work for them as well. It will use a hacky mechanism that is not the same as the real DOMContentLoaded and will not necessarily fire as soon as the real DOMContentLoaded would:

// The DOM ready check for Internet Explorer
function doScrollCheck() {
    if ( jQuery.isReady ) {
        return;
    }

    try {
        // If IE is used, use the trick by Diego Perini
        // http://javascript.nwbox.com/IEContentLoaded/
        document.documentElement.doScroll("left");
    } catch(e) {
        setTimeout( doScrollCheck, 1 );
        return;
    }

    // and execute any waiting functions
    jQuery.ready();
}
Tuesday, July 13, 2021
 
Litty
answered 5 Months ago
47

This worked well:

$("table tr").click(function(e) {
    var $link = $(this).find("a");

    if (e.target === $link[0]) return false;

    $link.trigger('click');
    return false;
});

EDIT:

Why most solutions don't work — they fail, because when the link was clicked, the immediate handler attached runs. The event then bubbles to see if a handler was attached to a table cell, row, etc.

When you suggest triggering a click you cause the recursion: the link was clicked → fancybox → bubbles → aha! table row → trigger the link click → the link was clicked…

When you suggest to stop propagation, please note that event stops bubbling to parent elements, so a click handler attached to body will not be executed.

Why the code above works — we check if the event bubbled from a link. If true, we simply return and stop further propagation.


See the updated fiddle: http://jsfiddle.net/F5aMb/28/

Tuesday, August 10, 2021
 
Stefan
answered 4 Months ago
25

You can go for the jQuery watch plugin to detect changes in the attributes.

Check out this post too:

http://darcyclarke.me/development/detect-attribute-changes-with-jquery/

Tuesday, August 17, 2021
 
tuckerjt07
answered 4 Months ago
55

You cannot access "expandos" (additional properties defined on a native prototype object) across security boundaries. The security boundary in this case being between the fully privileged chrome (add-on) code and the non-privileged website code.

So you need to pass data using something "standard". The CustomEvent stuff would do, however your code is wrong. You have to call the constructor or initCustomEvent() correctly:

var event = new CustomEvent('show-my-overlay', { detail: { index: 123 } });
content.document.dispatchEvent(event);

Another alternative is the postMessage API.

Thursday, October 14, 2021
 
HarryJ2213
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share