1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
% if ( !$init ) {
<script type="text/javascript" src="<%$p%>elements/masked_input_1.1.js">
</script>
% $init++;
% }
<& /elements/tr-input-text.html, id => $id, @_ &>
<script type="text/javascript">
<&| /elements/onload.js &>
MaskedInput({
elm: document.getElementById('<%$id%>'),
format: '<% $opt{format} %>',
<% $opt{allowed} ? "allowed: '$opt{allowed}'," : '' %>
<% $opt{typeon} ? "typeon: '$opt{typeon}'," : '' %>
});
document.getElementById('<%$id%>').value = <% $value |js_string %>;
% if ( $clipboard_hack ) {
var t = document.getElementById('<% $id %>');
var container = document.getElementById('<%$id%>_clipboard');
var KeyHandlerDown = t.onkeydown
t.onkeydown = function(e) {
if (typeof(e) == 'undefined') {
// ie8 hack
e = event;
}
// intercept ctrl-c and ctrl-x
// and cmd-c and cmd-x on mac
// when text is selected
if ( ( e.ctrlKey || e.metaKey ) ) {
// do the dance
var separators = /[\\/:-]/g;
var s = t.value.substr(t.selectionStart, t.selectionEnd);
if ( s ) {
container.value = s.replace(separators, '');
container.previous = t;
container.focus();
container.select();
return true;
}
}
return KeyHandlerDown.call(t, e);
};
container.onkeyup = function(e) {
if ( container.previous ) {
setTimeout(function() {
//container.previous.value = container.value;
container.previous.focus();
}, 10);
}
return true;
}
% } # 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',int(rand(10000)));
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>
|
