I have an edit box which accepts an email address on my html page.

At the moment, I have a javascript call 'onkeyup' which verifies if the email address is OK.

And it works well while the user types.

However, if I start typing my address (We will use [email protected]), and I start with:

me@

My autoplete offers me '[email protected]', as I have used it before.

When I select that from the autoplete drop down - 'onkeyup' doesn't fire. Instead, 'onchange' fires.

I need both to fire. As the suer types, I want to validate (onkeyup), but I need to also fire the javascript 'onchange'. I don't, however, think I should fire both events. Is there a way to handle both with a single event?

I have an edit box which accepts an email address on my html page.

At the moment, I have a javascript call 'onkeyup' which verifies if the email address is OK.

And it works well while the user types.

However, if I start typing my address (We will use [email protected]), and I start with:

me@

My autoplete offers me '[email protected]', as I have used it before.

When I select that from the autoplete drop down - 'onkeyup' doesn't fire. Instead, 'onchange' fires.

I need both to fire. As the suer types, I want to validate (onkeyup), but I need to also fire the javascript 'onchange'. I don't, however, think I should fire both events. Is there a way to handle both with a single event?

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 21, 2014 at 3:08 CraigCraig 18.8k4343 gold badges156156 silver badges263263 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 9

You can use oninput event to bine onkeyup and onchange events. This event fires on pasting (ctrl+v) too.

<input name="title" oninput="func()">

You aren't firing events--the browser is. You're merely listening for them and taking action when they occur.

Rather than having two event-driven functions in your HTML, do one function on either event using proper listeners:

$('#myInput').on('keyup change', function() {
    // do validation
});

I would just disable autoplete autoplete="off" for the input. Browsers react different to autoplete so unless you want to test the browser beforehand, it is best to just turn off the autoplete.