Masked Input with Richfaces

I would like to define a input-mask for a inputfield, e.g. for a telefonnumber or number in scientific notation (1.23 E-10). A nice way could be the usage of a special „css-class“ to mark the masked-input-elements and the usage of the alt-attribute to define the mask-format. Here is my solution:

First of all we need a little bit Javascript, i use the Masked Input Component from Jonas Raoni Soares Silva:

addEvent = function(o, e, f, s){
var r = o[r = "_" + (e = "on" + e)] = o[r] || (o[e] ? [[o[e], o]] : []), a, c, d;
r[r.length] = [f, s || o], o[e] = function(e){
try{
(e = e || (window.event ? (arguments = [].slice.call(arguments)).unshift(e = event) || 1 && e : {})).preventDefault || (e.preventDefault = function(){e.returnValue = false;});
e.stopPropagation || (e.stopPropagation = function(){e.cancelBubble = true;});
e.target || (e.target = e.srcElement || null);
e.key = (e.which + 1 || e.keyCode + 1) - 1 || 0;
}catch(f){}
for(d = 1, f = r.length; f; r[--f] && (a = r[f][0], o = r[f][1], a.apply ? c = a.apply(o, arguments) : (o._ = a, c = o._(e), o._ = null), d &= c !== false));
return e = null, !!d;
}
};
removeEvent = function(o, e, f, s){
for(var i = (e = o["_on" + e] || []).length; i;)
if(e[--i] && e[i][0] == f && (s || o) == e[i][1])
return delete e[i];
return false;
};
MaskInput = function(f, m){
function mask(e){
var patterns = {"1": /[A-Z]/i, "2": /[0-9]/, "4": /[\xC0-\xFF]/i, "8": /./ },
rules = { "a": 3, "A": 7, "9": 2, "C":5, "c": 1, "*": 8};
function accept(c, rule){
for(var i = 1, r = rules[rule] || 0; i <= r; i<<=1)
if(r & i && patterns[i].test(c))
break;
return i <= r || c == rule;
}
var k, mC, r, c = String.fromCharCode(k = e.key), l = f.value.length;
(!k || k == 8 ? 1 : (r = /^(.)\^(.*)$/.exec(m)) && (r[0] = r[2].indexOf(c) + 1) + 1 ?
r[1] == "O" ? r[0] : r[1] == "E" ? !r[0] : accept(c, r[1]) || r[0]
: (l = (f.value += m.substr(l, (r = /[A|9|C|\*]/i.exec(m.substr(l))) ?
r.index : l)).length) < m.length && accept(c, m.charAt(l))) || e.preventDefault();
};
for(var i in !/^(.)\^(.*)$/.test(m) && (f.maxLength = m.length), {keypress: 0, keyup: 1})
addEvent(f, i, mask);
};

then we define the inputfield:

<h:inputText styleClass="maskedInput" alt="9,99 E-99"/>

and last a little bit JS-Code which decorates the current formulare after each rerender, but it at the end of your page:

<a4j:outputPanel ajaxRendered="true">
  <script type="text/javascript">
   var maskedInput=$$(".maskedInput");
   if (Object.isArray(maskedInput)){
     maskedInput.each(function (elm){
     // input-mask is defined in the alt element
     var maskPattern = Element.readAttribute(elm, "alt");
     MaskInput(elm, maskPattern);
     });
   }
  </script>
</a4j:outputPanel>

That’s it 🙂 Every time A4J rerenders the page the decorator search all marked elements and creates a MaskInput object for the elements.

Try it!