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!
Tips JSF « Vida Np 23:54 am Donnerstag, 9. Oktober 2008 Permalink | Zum Antworten anmelden
[…] usar una mascara de entrada en un input text podemos consultar las super sencillas instrucciones de https://ahoehma.wordpress.com/2008/08/19/masked-input-with-richfaces/, solo tenemos que usar un poco de javascript y un control a4j. Ultra sencillo y muy […]