Change event suppressed

[pedrocatre]

I tried to bind an event handler to the "change" event and it works fine for inputs where I don't use formatter.js and it catches no change event (doesn't work) when I use it on inputs where I applied formatter.js.

So using this http://api.jquery.com/change/ does not work. And I'm guessing trying to catch other events won't work either. I saw an issue where users could not catch the "input" event for example (which, just to clarify, is not the same thing as the change event).

[jaridmargolin]

Formatter prevents default browser behavior and adjusts input on its own. I can look at ways to manually trigger change event after input has been modified.

[nathan-munchery]

This behavior makes the plugin completely unusable in the context of larger frameworks which make use of any kind of binding mechanism to keep views in sync with models.

[vovieque]

I can look at ways to manually trigger change event after input has been modified.

Do it, please. We can't bind any event handler (to events input, change, etc) for input.

[jlocke2]

Hello Everyone

Not sure, if this is still a current problem for anyone, but I was trying to accomplish the same thing, so I thought I would share how I achieved this functionality. It will require editing the formatter.js file.

1. Added 'change: false' option to defaults. Now when calling formatter, I can include this option as true, if I want my code changes to take effect.

2. Included if (this.opts.change) { console.log(this.el); $(this.el).trigger('change'); };

   just below this line this._formatValue(ignoreCaret);

3. You can now listen for the change event on your input just like you normally would.

This causes the change event to be fired anytime input is entered into the field, even if there is no visible change to text in the input due to your pattern matching. This may not be your desired functionality. If so, you would have to place the code from point 2 above in a different section of formatter.js.

I'm not sure, if this is the best way to fix the problem. There is probably a better, more acceptable way to accomplish this, but this definitely works. I actually would prefer to only fire the code, if text actually changes, but I'm not sure how to quickly accomplish this.

I would love to hear other thoughts or improvements to this solution.

Thanks Alan

[kentmw]

I am experiencing the same issue. There is another bug: https://github.com/firstopinion/formatter.js/issues/52 that is related to this issue. I would agree that this is an important bug fix in order for this plugin to be useful within a front end application.

It seems that putting your change trigger inside the method: _processKey would mean you would want to invoke an "input" event rather than "change" event. Check out http://jsfiddle.net/AtvtZ/ to see when each of these events are normally triggered.

[dragn]

Hi This is issue is also crucial to me. @jlocke2, @kentmw I agree that you should trigger input in _processKey, change should be triggered on blur (but only when value changed). There is a problem though. As I understand, formatter is agnostic of jQuery, so you can't use $.fn.trigger and you need another cross-browser method to trigger events...

[starkj]

As a workaround I am binding on the keyup and blur event which are not handled by formatter.js

This works in my case but could be problematic e.g. on mobile devices.

+1 for triggering some kind of change/input event

[ElGrecode]

Is there any update on this? Listening to the keyup event unfortunately won't work for me.

[jonathan-dejong]

Adding in my voice for this. The input event is much needed for this to work with other code

[jlocke2]

I have had sometime over the last day or so to think about this again. Here are some thoughts I have come up with based on my experience. Please let me know, if anything is off or could be improved upon.

1) Formatter doesn't interfere with most events you would listen to. Focus, blur, keydown, keypress, and keyup all seem to be working properly.

2) This leaves change and input. Both of these are affected, because they are only triggered when a user changes the value of the input (Input when the value of input is changed and change on blur if there has been a change in the input value). Since, Formatter changes the value of the input using JS these value based events aren't fired.

3) We need a way to fire these events from Formatter in a way that doesn't affect the rest of our own JS code. The way that makes the most sense to me is to create Events named either input or change and fire them at the proper time from formatter. This way our standard event listeners will still work.

4) Here is an initial draft that gets everything working. I made all changes in the _processKey function (every input type ultimately calls this function) except adding one new event listener at the top with the rest. I have included the relevant sections in a gist (focus on the sections between // Alan changes) modified formatter

5) So that code is pretty ugly, but it does, I believe, successfully accomplishes the goal of allowing everyone to write all their other JS listeners like they normally would and have them work properly with formatter inputs. If others think this approach is the right way to go, I will refactor everything and submit a pull request.

Thanks Alan

[jonathan-dejong]

Hi @jlocke2

Seems good to me. How would I test this? Add the gist to the formatter script?

[jlocke2]

Hey @jonathan-dejong

Yeah that should work. Don't copy the gist directly though. Just add the additions to the relevant sections.

[jonathan-dejong]

Okay, not sure where to add them in tho.. could you provide a fork with these added to the core file?

[jlocke2]

Hey @jonathan-dejong

I created a fork here https://github.com/jlocke2/formatter.js. Will that work for you?

[jonathan-dejong]

A million thanks :)

[jonathan-dejong]

For anyone else needing this but using the jQuery version I forked @jlocke2 version and added the fixes to jquery.formatter.js and jquery.formatter.min.js. https://github.com/jonathan-dejong/formatter.js

[tianxiaaiwojs]

what am I do is : at line 495 add: utils.addListener(self.el, 'blur', function (evt) { self._blur(evt); });

and add: Formatter.prototype._blur = function (evt) { if (this.opts.preValue != this.el.value){ $(this.el).trigger('change'); } };

and add: this.opts.preValue = this.el.value; in Formatter.prototype._focus

this is work for me...(JQuery version).