% if ( !$init ) {
<script type="text/javascript" src="<%$p%>elements/masked_input_1.3.js">
</script>
% $init++;
% }
<& /elements/tr-input-text.html, id => $id, @_ &>
<script type="text/javascript">
<&| /elements/onload.js &>
var el = document.getElementById('<%$id%>');
el.MaskedInput = window.MaskedInput({
  elm: el,
  format: '<% $opt{format} %>',
  <% $opt{allowed} ? "allowed: '$opt{allowed}'," : '' %>
  <% $opt{typeon}  ? "typeon:  '$opt{typeon}',"  : '' %>
});
el.value = <% $value |js_string %>;
% if ( $clipboard_hack ) {
var container = document.getElementById('<%$id%>_clipboard');
var KeyDownHandler = function(e) {
  e = e || event; // IE8
  // intercept ctrl-c and ctrl-x
  // and cmd-c and cmd-x on mac
  if ( ( e.ctrlKey || e.metaKey ) ) {
    // grab contents of the field, strip out delimiters and copy to container,
    // and select its contents so that the next "ctrl-c" copies it

    el.select(); // just a visual hint to the user
    var reject = /[^A-Za-z0-9]/g;
    container.value = el.value.replace(reject, '');
    container.focus();
    container.select();
    // don't confuse the maskedinput key handlers by letting them see this
    if (e.stopImmediatePropagation) {
      e.stopImmediatePropagation();
    } else {
      // IE8
      e.returnValue = false;
      e.cancelBubble = true;
    }
  }
};
var KeyUpHandler = function(e) {
  e = e || event;
  setTimeout( function() { el.focus() } , 10);
  return true;
};
var PasteHandler = function(e) {
  setTimeout( function() {
    el.MaskedInput.setValue(container.value);
  }, 10);
};
if ( el.addEventListener ) {
  el.addEventListener('keydown', KeyDownHandler);
  container.addEventListener('keyup', KeyUpHandler);
  container.addEventListener('paste', PasteHandler);
} else if ( el.attachEvent ) {
  el.attachEvent('onkeydown', KeyDownHandler);
  container.attachEvent('onkeyup', KeyUpHandler);
  container.attachEvent('onpaste', PasteHandler);
}
% } # clipboard hack
</&>
</script>
<input type="text" id="<%$id%>_clipboard" style="position:absolute; pointer-events: none; z-index: -1; opacity:0">
<%shared>
my $init = 0;
</%shared>
<%init>
my %opt = @_;
# must have a DOM id
my $id = $opt{id} || sprintf('input%04d',random_id(4));
my $value = length($opt{curr_value}) ? $opt{curr_value} : $opt{value} || '';

my $clipboard_hack = $FS::CurrentUser::CurrentUser->option('enable_mask_clipboard_hack');
</%init>
<%doc>
Set up a text input field with input masking.

<& /elements/tr-input-mask.html,
  format    => '____-__-__',
  #typeon   => '_YMDhms',    # which characters in the format represent blanks
  #allowed  => '0123456789', # characters allowed in the blanks
  ... all other options as for tr-input-text.html
&>

Note that the value sent on form submission will contain the mask 
separators, and if value/curr_value is passed, it should also be 
formatted to fit the mask.

Uses masked_input_1.1.js by Kendall Conrad, available under a Creative Commons
Attribution-ShareAlike license.
</%doc>