Triggering a jQuery custom event in a separate div when user starts typing in a text input

Question

I am trying to get a separate div (a custom 'continue' button) to appear when the user starts typing into a text input.
I am currently using this:

var submitButton = $('#submitButton');
submitButton.hide();
submitButton.on("showSubmitButton", function(event) {
    $( this ).show();
    $( this ).css('opacity', '0');
    $( this ).fadeTo(400, 0.6);
});
var textInput = $('#textInput');
textInput.click(function() {
    $( this ).find('input:text').val(''); // this clears the default 'type your name here' text 
});
textInput.keyDown(function() {
    submitButton.trigger("showSubmitButton");
});

When I had the "showSubmitButton" line inside the textInput.click function the submit button appeared on the click, but I want the button only to appear when the user has typed something into the input.
I have also used .keyPress(), but both key events trigger a 'has no method' error. I assume I must be using them incorrectly, but I don't know how.

TIP, line 4,5,6 why not chain it instead of typing $(this) 3 times?like show().css().fadeTo() — Ahmad
– Ahmad, Commented Oct 29, 2013 at 15:58

Anthony Grist · Accepted Answer · 2013-10-29 15:59:03Z

1

The shorthand functions for event handlers aren't camel case, so it's .keydown(), .keypress(), etc. rather than .keyDown() or .keyPress(). That said, I'd use either the input or keypress events (depending on browser support), with a check to see if the value of the textbox isn't an empty string:

textInput.find('input:text').on('input', function(e) {
    if($.trim(this.value).length > 0) {
        submitButton.trigger('showSubmitButton');
    }
    else {
        // consider hiding the submit button?
    }
});

answered Oct 29, 2013 at 15:59

Anthony Grist

38.4k8 gold badges65 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

moosefetcher Over a year ago

Yes, I've just realised (just after I posted this question, or course!) that there's no camel-case in the keydown event. So it was the capital D that was throwing it out. It works now. Thanks for the answer too - I may give that alternative a go.

moosefetcher Over a year ago

Thanks - your alternative works nicely. I changed the 'length > 0' to 'length < 2' so that it only triggers on the first input (it will also trigger when the user deletes down to 1 character-length, but I can live with that).

Johnbabu Koppolu · Accepted Answer · 2013-10-29 16:03:36Z

1

It is not keyDown - it is keydown

answered Oct 29, 2013 at 16:03

Johnbabu Koppolu

3,2522 gold badges26 silver badges34 bronze badges

Collectives™ on Stack Overflow

Triggering a jQuery custom event in a separate div when user starts typing in a text input

2 Answers 2

2 Comments

Comments

Your Answer

Collectives™ on Stack Overflow

Triggering a jQuery custom event in a separate div when user starts typing in a text input

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related