httemplate/elements/tr-input-mask.html

   1 % if ( !$init ) {
   2 <script type="text/javascript" src="<%$p%>elements/masked_input_1.1.js">
   3 </script>
   4 % $init++;
   5 % }
   6 <& /elements/tr-input-text.html, id => $id, @_ &>
   7 <script type="text/javascript">
   8 <&| /elements/onload.js &>
   9 MaskedInput({
  10   elm: document.getElementById('<%$id%>'),
  11   format: '<% $opt{format} %>',
  12   <% $opt{allowed} ? "allowed: '$opt{allowed}'," : '' %>
  13   <% $opt{typeon}  ? "typeon:  '$opt{typeon}',"  : '' %>
  14 });
  15 document.getElementById('<%$id%>').value = <% $value |js_string %>;
  16 % if ( $clipboard_hack ) {
  17 var t = document.getElementById('<% $id %>');
  18 var container = document.getElementById('<%$id%>_clipboard');
  19 var KeyHandlerDown = t.onkeydown
  20 t.onkeydown = function(e) {
  21   if (typeof(e) == 'undefined') {
  22     // ie8 hack
  23     e = event;
  24   }
  25   // intercept ctrl-c and ctrl-x
  26   // and cmd-c and cmd-x on mac
  27   // when text is selected
  28   if ( ( e.ctrlKey || e.metaKey ) ) {
  29     // do the dance
  30     var separators = /[\\/:-]/g;
  31     var s = t.value.substr(t.selectionStart, t.selectionEnd);
  32     if ( s ) {
  33       container.value = s.replace(separators, '');
  34       container.previous = t;
  35       container.focus();
  36       container.select();
  37       return true;
  38     }
  39   }
  40   return KeyHandlerDown.call(t, e);
  41 };
  42 container.onkeyup = function(e) {
  43   if ( container.previous ) {
  44     setTimeout(function() {
  45       //container.previous.value = container.value;
  46       container.previous.focus();
  47     }, 10);
  48   }
  49   return true;
  50 }
  51 % } # clipboard hack
  52 </&>
  53 </script>
  54 <input type="text" id="<%$id%>_clipboard" style="position:absolute; pointer-events: none; z-index: -1; opacity:0">
  55 <%shared>
  56 my $init = 0;
  57 </%shared>
  58 <%init>
  59 my %opt = @_;
  60 # must have a DOM id
  61 my $id = $opt{id} || sprintf('input%04d',int(rand(10000)));
  62 my $value = length($opt{curr_value}) ? $opt{curr_value} : $opt{value} || '';
  63
  64 my $clipboard_hack = $FS::CurrentUser::CurrentUser->option('enable_mask_clipboard_hack');
  65 </%init>
  66 <%doc>
  67 Set up a text input field with input masking.
  68
  69 <& /elements/tr-input-mask.html,
  70   format    => '____-__-__',
  71   #typeon   => '_YMDhms',    # which characters in the format represent blanks
  72   #allowed  => '0123456789', # characters allowed in the blanks
  73   ... all other options as for tr-input-text.html
  74 &>
  75
  76 Note that the value sent on form submission will contain the mask
  77 separators, and if value/curr_value is passed, it should also be
  78 formatted to fit the mask.
  79
  80 Uses masked_input_1.1.js by Kendall Conrad, available under a Creative Commons
  81 Attribution-ShareAlike license.
  82 </%doc>