r2411 - Added demos for allowing init with no options and changing the mask and placeholder optio...
Author: powella
Date: Mon Mar 30 08:53:50 2009
New Revision: 2411
Modified:
branches/dev/mask/demos/mask/default.html
Log:
Added demos for allowing init with no options and changing the mask and
placeholder options on the fly.
Modified: branches/dev/mask/demos/mask/default.html
==============================================================================
--- branches/dev/mask/demos/mask/default.html (original)
+++ branches/dev/mask/demos/mask/default.html Mon Mar 30 08:53:50 2009
@@ -27,6 +27,7 @@
$("#pct").mask({mask: "##%"});
$('#_TextCharacterRange').mask({mask: '[1-9]#%', enableInlineDefs:
true});
$('#_TextEscape').mask({mask: "##-#### \\?\\a\\\\"});
+ $('#_TextNoOptions').mask();
$("input")
.bind('blur.mask', function() { $("#info").html("Unmasked value: " +
$(this).mask('value') + '<br/>' + "Masked Value: " +
$(this).mask('formatted')); })
@@ -38,7 +39,19 @@
$('#_ButtonRemoveMask').click(function(){
$("#phone").mask('destroy');
- });
+ });
+
+ $('#_ButtonApply').click(function(){
+ $('#_TextNoOptions').mask("option", "mask", "###-##-####");
+ });
+
+ $('#_ButtonChangeMask').click(function(){
+ $('#_TextNoOptions').mask("option", "mask", "##-######");
+ });
+
+ $('#_ButtonChangePlaceholder').click(function(){
+ $('#_TextNoOptions').mask("option", "placeholder", " ");
+ });
$('#_ViewTest').mask({mask: '(###) ###-####'});
@@ -67,55 +80,65 @@
</tr>
<tr>
<td>Phone + Ext</td>
- <td><input id="phoneExt" type="text" tabindex="2"/></td>
+ <td><input id="phoneExt" type="text" tabindex="3"/></td>
<td>(###) ###-#### x#####</td>
</tr>
<tr>
<td>Int'l Phone</td>
- <td><input id="iphone" type="text" tabindex="2"/></td>
+ <td><input id="iphone" type="text" tabindex="4"/></td>
<td>+33 (###) ###-####</td>
</tr>
<tr>
<td>Tax ID</td>
- <td><input id="tin" type="text" tabindex="3"/></td>
+ <td><input id="tin" type="text" tabindex="5"/></td>
<td>##-#######</td>
</tr>
<tr>
<td>SSN<br/>( Allows partial Input ) </td>
- <td><input id="ssn" type="text" tabindex="4"/></td>
+ <td><input id="ssn" type="text" tabindex="6"/></td>
<td>###-##-####</td>
<td><button type="button" id="_ButtonChange">Change Ssn
Value</button></td>
</tr>
<tr>
<td>Product Key</td>
- <td><input id="product" type="text" tabindex="5"/></td>
+ <td><input id="product" type="text" tabindex="7"/></td>
<td>a*-###-a###</td></tr>
<tr>
<td>Eye Script</td>
- <td><input id="eyescript" type="text" tabindex="6"/></td>
+ <td><input id="eyescript" type="text" tabindex="8"/></td>
<td>~#.## ~#.## ###</td>
</tr>
<tr>
<td>Purchase Order</td>
- <td><input id="po" type="text" tabindex="6"/></td>
+ <td><input id="po" type="text" tabindex="9"/></td>
<td>PO: aaa-###-***</td>
</tr>
<tr>
<td>Percent</td>
- <td><input id="pct" type="text" tabindex="6"/></td>
+ <td><input id="pct" type="text" tabindex="10"/></td>
<td>##%</td>
</tr>
<tr>
<td>Character Ranges</td>
- <td><input id="_TextCharacterRange" type="text" tabindex="7"/></td>
+ <td><input id="_TextCharacterRange" type="text" tabindex="11"/></td>
<td>[1-9]#%</td>
</tr>
<tr>
<td>Mask Escaping</td>
- <td><input id="_TextEscape" type="text" tabindex="7"/></td>
+ <td><input id="_TextEscape" type="text" tabindex="12"/></td>
<td>##-#### ?a\</td>
<td>Escaping allows defining literal characters in the mask which are
also defined as definitions.</td>
</tr>
+ <tr>
+ <td>Changing Options</td>
+ <td><input id="_TextNoOptions" type="text" tabindex="13"/></td>
+ <td>(No mask specified)</td>
+ <td>
+ <button type="button" id="_ButtonApply">Apply Mask</button>
+ <button type="button" id="_ButtonChangeMask">Change Mask</button>
+ <button type="button" id="_ButtonChangePlaceholder">Change
Placeholder</button>
+ </td>
+ </tr>
<tr>
<td>Non-Input Element</td>
<td colspan="3">