Added support for calling change event by using event.simulate.js

bjartekv · Sep 22, 2009 · 12a52d1 · 12a52d1
1 parent 61ff7d4
commit 12a52d1
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 50 deletions.
diff --git a/README.markdown b/README.markdown
@@ -2,10 +2,10 @@ MaskedInput Prototype
 =============
 
 A quick port of the jQuery Masked Input Plugin to Prototype.
-The plugin breaks the native change event in the browser, the part where the jQuery.change() event is called in the original code is commented out. 
-I don't know of anything similar in Prototype. 
+The plugin breaks the native change event in the browser. It won't fire unless event.simulate.js is available.
 
 Requires: Prototype >= 1.6.1
+Optional: event.simulate.js from http://github.com/kangax/protolicious to trigger native change event.
 Tested on windows IE6, IE7, IE8, Opera 9.6, Chrome 3, FireFox 3, Safari 3
 
 ### Example code

diff --git a/prototype.maskedinput.js b/prototype.maskedinput.js
@@ -1,10 +1,12 @@
 /*
     Masked Input plugin for prototype ported from jQuery 
     Bjarte K. Vebjørnsen <bjartekv at gmail dot com>
-
-    Removed code for triggering change event since this doesn't work on prototype
         
+    Note that the onchange event isn't fired for masked inputs. It won't fire unless event.simulate.js is available.
+
     Requires: Prototype >= 1.6.1
+    Optional: event.simulate.js from http://github.com/kangax/protolicious to trigger native change event.
+
     Tested on windows IE6, IE7, IE8, Opera 9.6, Chrome 3, FireFox 3, Safari 3
     
     Masked Input plugin for jQuery
@@ -188,8 +190,13 @@
 
                 function blurEvent(e) {
                     checkVal();
-                    //if (input.getValue() != focusText)
-                    //	input.fire('change');
+                    if (input.getValue() != focusText) {
+                        // since the native change event doesn't fire we have to fire it ourselves
+                        // since Event.fire doesn't support native events we're using Event.simulate if available
+                        if (window.Event.simulate) {
+                            input.simulate('change');
+                        }
+                    }
                 };
 
                 function focusEvent(e) {

diff --git a/test.htm b/test.htm
@@ -1,44 +1,47 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-    <title>Testing MaskedInput</title>
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
-    <script type="text/javascript" src="prototype.maskedinput.js"></script>
-</head>
-<body>
-    <script type="text/javascript">
-    function logEvent(e) {
-        if (window.console && console.log) {
-            console.log(e.type+' event on '+e.element().identify());
-        }
-    }
-
-    Event.observe(window, 'load', function() {     
-        Event.observe('test', 'focus', logEvent);
-        Event.observe('test2', 'focus', logEvent);
-
-        var mi = new MaskedInput('.text', '99.99.9999');
-        $('unmask').observe('click', function() {
-            mi.unmask();
-        });
-
-        $('mask').observe('click', function() {
-            mi.unmask().mask('99.99.9999');
-        });
-
-        MaskedInput.definitions['a'] = '[A-Z]'; 
-        MaskedInput.definitions['b'] = '[0-1]'; 
-
-        new MaskedInput('#test3', 'aa.bb.9999');	
-    });
-    </script>
-
-    <input id="test" class="text" type="text" size="10" />
-    <input id="test2" class="text" type="text" size="10" />
-    <input id="test3" type="text" size="10" />
-    <button id="unmask">UNMASK</button>
-    <button id="mask">MASK</button>
-</body>
-</html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>Testing MaskedInput</title>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>
+    <script type="text/javascript" src="http://github.com/kangax/protolicious/raw/master/event.simulate.js"></script>
+    <script type="text/javascript" src="prototype.maskedinput.js"></script>
+</head>
+<body>
+    <script type="text/javascript">
+    function logEvent(e) {
+        if (window.console && console.log) {
+            console.log(e.type+' event on '+e.element().identify());
+        }
+    }
+
+    Event.observe(window, 'load', function() {     
+        Event.observe('test', 'focus', logEvent);
+        Event.observe('test', 'change', logEvent);
+        Event.observe('test2', 'focus', logEvent);
+        Event.observe('test2', 'change', logEvent);
+
+        var mi = new MaskedInput('.text', '99.99.9999');
+        $('unmask').observe('click', function() {
+            mi.unmask();
+        });
+
+        $('mask').observe('click', function() {
+            mi.unmask().mask('99.99.9999');
+        });
+
+        MaskedInput.definitions['a'] = '[A-Z]'; 
+        MaskedInput.definitions['b'] = '[0-1]'; 
+
+        new MaskedInput('#test3', 'aa.bb.9999');	
+    });
+    </script>
+
+    <input id="test" class="text" type="text" size="10" />
+    <input id="test2" class="text" type="text" size="10" />
+    <input id="test3" type="text" size="10" />
+    <button id="unmask">UNMASK</button>
+    <button id="mask">MASK</button>
+</body>
+</html>