r2359 - Initial port of jquery.maskedinput.js to widget framework and accompanying demo. Included...
Author: powella
Date: Sun Mar 22 17:47:48 2009
New Revision: 2359
Added:
branches/dev/mask/demos/mask/digitalbush.html
branches/dev/mask/ui/ui.mask.js
Modified:
branches/dev/mask/demos/mask/index.html
Log:
Initial port of jquery.maskedinput.js to widget framework and accompanying
demo. Included the original demo from digitalbush.com.
Added: branches/dev/mask/demos/mask/digitalbush.html
==============================================================================
--- (empty file)
+++ branches/dev/mask/demos/mask/digitalbush.html Sun Mar 22 17:47:48 2009
@@ -0,0 +1,44 @@
+<html>
+<head>
+<title> jQuery Mask Test </title>
+<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+<script src="jquery.maskedinput.js" type="text/javascript"></script>
+<script type="text/javascript">
+ $(function() {
+ $.mask.definitions['~'] = "[+-]";
+ $("#date").mask("99/99/9999").change(function() {
alert("changed!")}); ;
+ $("#phone").mask("(999) 999-9999");
+ $("#phoneExt").mask("(999) 999-9999? x99999");
+ $("#iphone").mask("+33 999 999 999");
+ $("#tin").mask("99-9999999");
+ $("#ssn").mask("999-99-9999");
+ $("#product").mask("a*-999-a999", { position: " " });
+ $("#eyescript").mask("~9.99 ~9.99 999");
+ $("#po").mask("PO: aaa-999-***");
+ $("#pct").mask("99%");
+
+ $("input").blur(function() {
+ $("#info").html("Unmasked value: " + $(this).mask());
+ }).dblclick(function() {
+ $(this).unmask();
+ });
+ });
+
+</script>
+</head>
+<body>
+<table>
+ <tr><td>Date</td><td><input id="date" value="1231" type="text"
tabindex="1" /></td><td>99/99/9999</td></tr>
+ <tr><td>Phone</td><td><input id="phone" type="text"
tabindex="2"/></td><td>(999) 999-9999</td></tr>
+ <tr><td>Phone + Ext</td><td><input id="phoneExt" type="text"
tabindex="2"/></td><td>(999) 999-9999? x99999</td></tr>
+ <tr><td>Int'l Phone</td><td><input id="iphone" type="text"
tabindex="2"/></td><td>+44 (999) 999-9999</td></tr>
+ <tr><td>Tax ID</td><td><input id="tin" type="text"
tabindex="3"/></td><td>99-9999999</td></tr>
+ <tr><td>SSN</td><td><input id="ssn" type="text"
tabindex="4"/></td><td>999-99-9999</td></tr>
+ <tr><td>Product Key</td><td><input id="product" type="text"
tabindex="5"/></td><td>a*-999-a999</td></tr>
+ <tr><td>Eye Script</td><td><input id="eyescript" type="text"
tabindex="6"/></td><td>~9.99 ~9.99 999</td></tr>
+ <tr><td>Purchase Order</td><td><input id="po" type="text"
tabindex="6"/></td><td>aaa-999-***</td></tr>
+ <tr><td>Percent</td><td><input id="pct" type="text"
tabindex="6"/></td><td>99%</td></tr>
+</table>
+<div id="info"></div>
+</body>
+</html>
Modified: branches/dev/mask/demos/mask/index.html
==============================================================================
--- branches/dev/mask/demos/mask/index.html (original)
+++ branches/dev/mask/demos/mask/index.html Sun Mar 22 17:47:48 2009
@@ -1,44 +1,94 @@
<html>
<head>
-<title> jQuery Mask Test </title>
-<script src="../../../lib/jquery-1.2.6.js" type="text/javascript"
charset="utf-8"></script>
-<script src="../src/jquery.maskedinput.js" type="text/javascript"></script>
-<script type="text/javascript">
- $(function() {
- $.mask.definitions['~'] = "[+-]";
- $("#date").mask("99/99/9999").change(function() {
alert("changed!")}); ;
- $("#phone").mask("(999) 999-9999");
- $("#phoneExt").mask("(999) 999-9999? x99999");
- $("#iphone").mask("+33 999 999 999");
- $("#tin").mask("99-9999999");
- $("#ssn").mask("999-99-9999");
- $("#product").mask("a*-999-a999", { position: " " });
- $("#eyescript").mask("~9.99 ~9.99 999");
- $("#po").mask("PO: aaa-999-***");
- $("#pct").mask("99%");
+ <title>jQuery UI Mask Plugin Demo</title>
- $("input").blur(function() {
- $("#info").html("Unmasked value: " + $(this).mask());
- }).dblclick(function() {
- $(this).unmask();
- });
- });
+ <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.mask.js"></script>
+
+ <script type="text/javascript">
-</script>
+ $(document).ready(function(){
+
+ $.ui.mask.definitions['~'] = "[+-]";
+
+ $("#date")
+ .mask({mask: "##/##/####"})
+ .change(function() { alert("changed!")}); ;
+ $("#phone").mask({mask: "(###) ###-####"});
+ $("#phoneExt").mask({mask: "(###) ###-#### x#####"});
+ $("#iphone").mask({mask: "+33 ### ### ###"});
+ $("#tin").mask({mask: "##-#######"});
+ $("#ssn").mask({mask: "###-##-####"});
+ $("#product").mask({mask: "a*-###-a###", placeholder: " " });
+ $("#eyescript").mask({mask: "~#.## ~#.## ###"});
+ $("#po").mask({mask: "PO: aaa-###-***"});
+ $("#pct").mask({mask: "##%"});
+
+ $("input")
+ .bind('blur.mask', function() { $("#info").html("Unmasked value: " +
$(this).mask('value') + '<br/>' + "Masked Value: " +
$(this).mask('formatted')); })
+ .bind('dblclick.mask', function() { $(this).mask('value'); });
+
+ $("#phone").mask('destroy');
+
+ });
+
+ </script>
</head>
<body>
-<table>
- <tr><td>Date</td><td><input id="date" value="1231" type="text"
tabindex="1" /></td><td>99/99/9999</td></tr>
- <tr><td>Phone</td><td><input id="phone" type="text"
tabindex="2"/></td><td>(999) 999-9999</td></tr>
- <tr><td>Phone + Ext</td><td><input id="phoneExt" type="text"
tabindex="2"/></td><td>(999) 999-9999? x99999</td></tr>
- <tr><td>Int'l Phone</td><td><input id="iphone" type="text"
tabindex="2"/></td><td>+44 (999) 999-9999</td></tr>
- <tr><td>Tax ID</td><td><input id="tin" type="text"
tabindex="3"/></td><td>99-9999999</td></tr>
- <tr><td>SSN</td><td><input id="ssn" type="text"
tabindex="4"/></td><td>999-99-9999</td></tr>
- <tr><td>Product Key</td><td><input id="product" type="text"
tabindex="5"/></td><td>a*-999-a999</td></tr>
- <tr><td>Eye Script</td><td><input id="eyescript" type="text"
tabindex="6"/></td><td>~9.99 ~9.99 999</td></tr>
- <tr><td>Purchase Order</td><td><input id="po" type="text"
tabindex="6"/></td><td>aaa-999-***</td></tr>
- <tr><td>Percent</td><td><input id="pct" type="text"
tabindex="6"/></td><td>99%</td></tr>
-</table>
-<div id="info"></div>
+ <table>
+ <tr>
+ <td>Date</td>
+ <td><input id="date" value="1231" type="text" tabindex="1" /></td>
+ <td>##/##/####</td>
+ </tr>
+ <tr>
+ <td>Phone</td>
+ <td><input id="phone" type="text" tabindex="2"/></td>
+ <td>(###) ###-####</td>
+ </tr>
+ <tr>
+ <td>Phone + Ext</td>
+ <td><input id="phoneExt" type="text" tabindex="2"/></td>
+ <td>(###) ###-#### x#####</td>
+ </tr>
+ <tr>
+ <td>Int'l Phone</td>
+ <td><input id="iphone" type="text" tabindex="2"/></td>
+ <td>+33 (###) ###-####</td>
+ </tr>
+ <tr>
+ <td>Tax ID</td>
+ <td><input id="tin" type="text" tabindex="3"/></td>
+ <td>##-#######</td>
+ </tr>
+ <tr>
+ <td>SSN</td>
+ <td><input id="ssn" type="text" tabindex="4"/></td>
+ <td>###-##-####</td>
+ </tr>
+ <tr>
+ <td>Product Key</td>
+ <td><input id="product" type="text" tabindex="5"/></td>
+ <td>a*-###-a###</td></tr>
+ <tr>
+ <td>Eye Script</td>
+ <td><input id="eyescript" type="text" tabindex="6"/></td>
+ <td>~#.## ~#.## ###</td>
+ </tr>
+ <tr>
+ <td>Purchase Order</td>
+ <td><input id="po" type="text" tabindex="6"/></td>
+ <td>PO: aaa-###-***</td>
+ </tr>
+ <tr><td>Percent</td>
+ <td><input id="pct" type="text" tabindex="6"/></td>
+ <td>##%</td>
+ </tr>
+ </table>
+ <div id="info"></div>
</body>
</html>
Added: branches/dev/mask/ui/ui.mask.js
==============================================================================
--- (empty file)
+++ branches/dev/mask/ui/ui.mask.js Sun Mar 22 17:47:48 2009
@@ -0,0 +1,289 @@
+/*
+ * jQuery UI Mask @VERSION
+ *
+ * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * Based on the jquery.maskedinput.js plugin by Josh Bush (digitalbush.com)
+ *
+ * http://docs.jquery.com/UI/Progressbar
+ *
+ * Depends:
+ * ui.core.js
+ */
+(function($) {
+
+var pasteEventName = ($.browser.msie ? 'paste' : 'input') + ".mask",
+ iPhone = (window.orientation != undefined),
+ undefined;
+
+$.widget("ui.mask", {
+
+ _init: function() {
+
+ if(!this.options.mask || !this.options.mask.length) return; //no mask
pattern defined. no point in continuing.
+ if(!this.options.placeholder || !this.options.placeholder.length)
this.options.placeholder = '_'; //in case the user decided to nix a
placeholder.
+
+ var input = this.element,
+ opts = this.options,
+ mask = opts.mask,
+ defs = $.ui.mask.definitions,
+ tests = [],
+ partialPosition = mask.length,
+ firstNonMaskPos = null,
+ len = mask.length,
+ caret = function(begin, end){ return $.ui.mask.caret(input, begin,
end); };
+
+ $.each(mask.split(""), function(i, c) {
+ if (c == '?') {
+ len--;
+ partialPosition = i;
+ }
+ else if (defs[c]){
+ tests.push(new RegExp(defs[c]));
+ if(firstNonMaskPos==null)
+ firstNonMaskPos = tests.length - 1;
+ }
+ else{
+ tests.push(null);
+ }
+ });
+
+ var buffer = $.map(mask.split(""), function(c, i) { if (c != '?') return
defs[c] ? opts.placeholder : c }),
+ ignore = false, //Variable for ignoring control keys
+ focusText = input.val();
+
+ input.data("buffer", buffer).data("tests", tests);
+
+ function seekNext(pos) {
+ while (++pos <= len && !tests[pos]);
+ return pos;
+ };
+
+ function shiftL(pos) {
+ while (!tests[pos] && --pos >= 0);
+ for (var i = pos; i < len; i++) {
+ if (tests[i]) {
+ buffer[i] = opts.placeholder;
+ var j = seekNext(i);
+ if (j < len && tests[i].test(buffer[j])) {
+ buffer[i] = buffer[j];
+ } else
+ break;
+ }
+ }
+ writeBuffer();
+ caret(Math.max(firstNonMaskPos, pos));
+ };
+
+ function shiftR(pos) {
+ for (var i = pos, c = opts.placeholder; i < len; i++) {
+ if (tests[i]) {
+ var j = seekNext(i);
+ var t = buffer[i];
+ buffer[i] = c;
+ if (j < len && tests[j].test(t))
+ c = t;
+ else
+ break;
+ }
+ }
+ };
+
+ function selection(){
+ var pos = caret();
+ return input.val().substring(pos.begin, pos.end);
+ };
+
+ function keydownEvent(e) {
+ var pos = caret();
+ var k = e.keyCode;
+ ignore = (k < 16 || (k > 16 && k < 32) || (k > 32 && k < 41));
+
+ //delete selection before proceeding
+ if ((pos.begin - pos.end) != 0 && (!ignore || k == 8 || k == 46))
+ clearBuffer(pos.begin, pos.end);
+
+ //backspace, delete, and escape get special treatment
+ if (k == 8 || k == 46 || (iPhone && k == 127)) {//backspace/delete
+ shiftL(pos.begin + ((k == 46 || (k == 8 && selection().length)) ? 0 :
-1));
+ return false;
+ } else if (k == 27) {//escape
+ input.val(focusText);
+ input.caret(0, checkVal());
+ return false;
+ }
+ };
+
+ function keypressEvent(e) {
+ if (ignore) {
+ ignore = false;
+ //Fixes Mac FF bug on backspace
+ return (e.keyCode == 8) ? false : null;
+ }
+ e = e || window.event;
+ var k = e.charCode || e.keyCode || e.which;
+ var pos = caret();
+
+ if (e.ctrlKey || e.altKey || e.metaKey) {//Ignore
+ return true;
+ } else if ((k >= 32 && k <= 125) || k > 186) {//typeable characters
+ var p = seekNext(pos.begin - 1);
+ if (p < len) {
+ var c = String.fromCharCode(k);
+ if (tests[p].test(c)) {
+ shiftR(p);
+ buffer[p] = c;
+ writeBuffer();
+ var next = seekNext(p);
+ caret(next);
+ if (opts.completed && next == len)
+ opts.completed.call(input);
+ }
+ }
+ }
+ return false;
+ };
+
+
+ function clearBuffer(start, end) {
+ for (var i = start; i < end && i < len; i++) {
+ if (tests[i])
+ buffer[i] = opts.placeholder;
+ }
+ };
+
+ function writeBuffer() { return input.val(buffer.join('')).val(); };
+
+ function checkVal(allow) {
+ //try to place characters where they belong
+ var test = input.val();
+ var lastMatch = -1;
+ for (var i = 0, pos = 0; i < len; i++) {
+ if (tests[i]) {
+ buffer[i] = opts.placeholder;
+ while (pos++ < test.length) {
+ var c = test.charAt(pos - 1);
+ if (tests[i].test(c)) {
+ buffer[i] = c;
+ lastMatch = i;
+ break;
+ }
+ }
+ if (pos > test.length)
+ break;
+ } else if (buffer[i] == test[pos] && i!=partialPosition) {
+ pos++;
+ lastMatch = i;
+ }
+ }
+ if (!allow && lastMatch + 1 < partialPosition) {
+ input.val("");
+ clearBuffer(0, len);
+ } else if (allow || lastMatch + 1 >= partialPosition) {
+ writeBuffer();
+ if (!allow) input.val(input.val().substring(0, lastMatch + 1));
+ }
+ return (partialPosition ? i : firstNonMaskPos);
+ };
+
+ input
+ .one("unmask", function() {
+ input
+ .unbind(".mask")
+ .removeData("buffer")
+ .removeData("tests");
+ })
+
+ if (!input.attr("readonly"))
+ input
+ .bind("focus.mask", function() {
+ focusText = input.val();
+ var pos = checkVal();
+ writeBuffer();
+ setTimeout(function() {
+ if (pos == mask.length)
+ caret(0, pos);
+ else
+ &n