httemplate/elements/tr-input-mask.html

   1 % if ( !$init ) {
   2 <script type="text/javascript" src="<%$p%>elements/masked_input_1.3.js">
   3 </script>
   4 % $init++;
   5 % }
   6 <& /elements/tr-input-text.html, id => $id, @_ &>
   7 <script type="text/javascript">
   8 <&| /elements/onload.js &>
   9 var el = document.getElementById('<%$id%>');
  10 el.MaskedInput = window.MaskedInput({
  11   elm: el,
  12   format: '<% $opt{format} %>',
  13   <% $opt{allowed} ? "allowed: '$opt{allowed}'," : '' %>
  14   <% $opt{typeon}  ? "typeon:  '$opt{typeon}',"  : '' %>
  15 });
  16 el.value = <% $value |js_string %>;
  17 % if ( $clipboard_hack ) {
  18 var container = document.getElementById('<%$id%>_clipboard');
  19 var KeyDownHandler = function(e) {
  20   e = e || event; // IE8
  21   // intercept ctrl-c and ctrl-x
  22   // and cmd-c and cmd-x on mac
  23   if ( ( e.ctrlKey || e.metaKey ) ) {
  24     // grab contents of the field, strip out delimiters and copy to container,
  25     // and select its contents so that the next "ctrl-c" copies it
  26
  27     el.select(); // just a visual hint to the user
  28     var reject = /[^A-Za-z0-9]/g;
  29     container.value = el.value.replace(reject, '');
  30     container.focus();
  31     container.select();
  32     // don't confuse the maskedinput key handlers by letting them see this
  33     if (e.stopImmediatePropagation) {
  34       e.stopImmediatePropagation();
  35     } else {
  36       // IE8
  37       e.returnValue = false;
  38       e.cancelBubble = true;
  39     }
  40   }
  41 };
  42 var KeyUpHandler = function(e) {
  43   e = e || event;
  44   setTimeout( function() { el.focus() } , 10);
  45   return true;
  46 };
  47 var PasteHandler = function(e) {
  48   setTimeout( function() {
  49     el.MaskedInput.setValue(container.value);
  50   }, 10);
  51 };
  52 if ( el.addEventListener ) {
  53   el.addEventListener('keydown', KeyDownHandler);
  54   container.addEventListener('keyup', KeyUpHandler);
  55   container.addEventListener('paste', PasteHandler);
  56 } else if ( el.attachEvent ) {
  57   el.attachEvent('onkeydown', KeyDownHandler);
  58   container.attachEvent('onkeyup', KeyUpHandler);
  59   container.attachEvent('onpaste', PasteHandler);
  60 }
  61 % } # clipboard hack
  62 </&>
  63 </script>
  64 <input type="text" id="<%$id%>_clipboard" style="position:absolute; pointer-events: none; z-index: -1; opacity:0">
  65 <%shared>
  66 my $init = 0;
  67 </%shared>
  68 <%init>
  69 my %opt = @_;
  70 # must have a DOM id
  71 my $id = $opt{id} || sprintf('input%04d',random_id(4));
  72 my $value = length($opt{curr_value}) ? $opt{curr_value} : $opt{value} || '';
  73
  74 my $clipboard_hack = $FS::CurrentUser::CurrentUser->option('enable_mask_clipboard_hack');
  75 </%init>
  76 <%doc>
  77 Set up a text input field with input masking.
  78
  79 <& /elements/tr-input-mask.html,
  80   format    => '____-__-__',
  81   #typeon   => '_YMDhms',    # which characters in the format represent blanks
  82   #allowed  => '0123456789', # characters allowed in the blanks
  83   ... all other options as for tr-input-text.html
  84 &>
  85
  86 Note that the value sent on form submission will contain the mask
  87 separators, and if value/curr_value is passed, it should also be
  88 formatted to fit the mask.
  89
  90 Uses masked_input_1.1.js by Kendall Conrad, available under a Creative Commons
  91 Attribution-ShareAlike license.
  92 </%doc>