Javascript solution for preventing non-numeric characters in ADF Faces

You can use JavaScript to filter out non-numeric characters from a ADF Faces Input Text field by following the below approach. I tried many methods found in various sites but to filter out the special characters like !@#$%^&*() nothing worked for me.

First of add the following JavaScript resource as below.

<af:resource type="javascript">               var shiftDown = false;               processKeyUp = function (e) {                   var key = e.getKeyCode();                   if (key == 16) {                       shiftDown = false;                   }               }               processKeyDown = function (e) {                   var key = e.getKeyCode();                   if (key == 16) {                       shiftDown = true;                   }                    // Allow: backspace, delete, tab, escape, enter and .                   if (key == 46 || key == 8 || key == 9 || key == 27 || key == 13 || key == 110 || key == 190 ||                   // Allow: home, end, left, right                   (key >= 35 &amp;&amp; key &lt; 40))                   {                       // let it happen, don't do anything                       return;                   }                   else {                       // If non numeric or shift is pressed then stop the keypress                       if (shiftDown || (key &lt; 48 || key > 57) &amp;&amp; (key &lt; 96 || key > 105)) {                           e.cancel();                       }                   }               };             </af:resource>

 

In JSF page Fragments remember to add this inside a layout container like PanelformLayout.

I faced problems with rendering the page when the JavaScript had < and && in the conditions so I substituted with &lt; and &amp;&amp;

Now add two Client Listeners for the Input Text field as shown below

<af:inputText value="#{bindings.Salary.inputValue}" label="#{bindings.Salary.hints.label}"                           required="#{bindings.Salary.hints.mandatory}"                           columns="#{bindings.Salary.hints.displayWidth}"                           maximumLength="#{bindings.Salary.hints.precision}"                           shortDesc="#{bindings.Salary.hints.tooltip}" id="it7" styleClass="numeric">                 <f:validator binding="#{bindings.Salary.validator}"/>                 <af:clientListener method="processKeyDown" type="keyDown"/>                 <af:clientListener method="processKeyUp" type="keyUp"/>             </af:inputText>

 

That’s it.