Input with onChange event

[KingRial]

If I try to use this plugin on an input with an onChange event, the event is fired evey time I press a key on the physical keyboard or on the virtual keyboard.

Example using jQuery to show the value on the onchange event:
<input type="text" onchange="alert($(this).val())" >

Is there any way to handle the onchange event on the correct way using this plugin ?

[Mottie]

Hi KingRial!

The change event is fired every time to allow you to check/validate the input. If you want to use an event that is fired after the user has completed their input, use the beforeClose, accepted, canceled or hidden events or callbacks. Get more details about it in the documentation.

[KingRial]

So, if I have understood correctly, it's not possible to see the correct HTML onchange event fired if I am using the next example:

<input type="text" onchange="alert($(this).val())" >
<script>
$('input').keyboard({...options you like...});
</script>

To see the alert message I should execute the function on the events you showed to me and not by using the HTML.

It would be very helpfull if this could be handled automatically by the plugin.
I'll try to fork the project and pull a solution if I'll be able to change the current behaviour.

Thanks for the answer!

[Mottie]

Well, the plugin does trigger a namespaced change event after each change of input value (through typing on either the physical or virtual keyboard). So you can differentiate the change made by the keyboard versus an input event change.

I just tested this and I think the keyboard plugin does prevent the input change event from firing. So, I will add a proper trigger in the next update, but until then you can choose from one of the events and bind to it like this:

<input type="text" onchange="alert($(this).val())" >
<script>
$('input').keyboard({
    beforeClose: function(e, keyboard, el){
        keyboard.$el.trigger('change');
    }
});
</script>

I also wanted to add that there is a trend, maybe you can call it a new standard, to use unobtrusive javascript. This is just a fancy way of saying separate the javascript from the html (no inline javascript). It keeps the HTML cleaner and all of the javascript together. So, alternatively, you could just use this code which does pretty much the same thing:

<input type="text" >
<script>
$('input').keyboard({
    beforeClose: function(e, keyboard, el){
        alert($(this).val());
    }
});
</script>

[Mottie]

Hi KingRial!

I didn't do extensive testing on the new option, but I think it will work in your situation. Please keep me informed :)

Thanks!