4 Replies Latest reply: Apr 16, 2014 6:56 AM by Joe_990933 RSS

    number field Apex 4.2.4 in XE

    Joe_990933

      Hello together,

       

      I am facing the follwoing problem:

       

      I've created a page and added a "Number Field" in a mobile application.

       

      But the user is able to enter characters. If he wants to save it, he gets the message "only number values are allowed".

       

      So my questions are as followed:

       

      1. How can I avoid that the user is able to enter characters. It should only be possible to enter number values.

      2. Is there a solution to only show the number pad when he is setting his cursor to a number filed?

       

      Thanks in advance.

       

      Joe

        • 1. Re: number field Apex 4.2.4 in XE
          TexasApexDeveloper

          Add the following javascript function o your page header, under the

          Function and Global Variable Declaration


          function isNumber(event) {
            if (event) {
            var charCode = (event.which) ? event.which : event.keyCode;
            if (charCode != 190 && charCode > 31 && 
            (charCode < 48 || charCode > 57) && 
            (charCode < 96 || charCode > 105) && 
            (charCode < 37 || charCode > 40) && 
            charCode != 110 && charCode != 8 && charCode != 46 )
            return false;
            }
            return true;
          }


          For the column/field in question.. Add the following to the element attributes:

          onkeydown="return isNumber(event);"


          This will now force input of only numeric characters in the field...


          Thank you,


          Tony Miller
          LuvMuffin Software
          Ruckersville, VA

          • 2. Re: number field Apex 4.2.4 in XE
            Joe_990933

            Hi Tony,

             

            thanks for your help. It looks not bad but I dont understand why it is still possible to enter the following characters:

             

            !"§$%&/()=´`.

             

            I have checked the charcodes and for me it looks fine. But it is possible to enter these characters.

             

            Do you have an idea?

             

            cheers

             

            Joe

            • 3. Re: number field Apex 4.2.4 in XE
              TexasApexDeveloper

              Add code then to act on those characters..  It would mainly involve looking at an ASCII table and determining the range of values that you want to ignore: Ascii Table - ASCII character codes and html, octal, hex and decimal chart conversion

               

              Thank you,

               

              Tony Miller
              LuvMuffin Software
              Ruckersville, VA

              • 4. Re: number field Apex 4.2.4 in XE
                Joe_990933

                Hi,

                 

                I found a solution for both questions.

                 

                1. Allow only Numbers in a "Number field"

                As allready described by TexasApexDeveloper you have to use javascript. I've modified his function a little bit:

                 

                function isNumber(event) {

                    if (event) {

                        var charCode = (event.which) ? event.which : event.keyCode;

                        if (event.altKey // alt

                            || event.ctrlKey // crtl

                            || event.shiftKey // shift

                            || event.which === 0 // special chars

                            || !((charCode >= 48 && charCode <= 57) // numbers

                                || (charCode >= 96 && charCode <= 105) // numblocks

                                || (charCode >= 37 && charCode <= 40) // cursors

                                || charCode === 8 // backspace

                                || charCode === 46)) { // delete

                            return false;

                        }

                    }

                    return true;

                };

                 

                To call the function, open the requested item and add the following line in section "HTML Form Element Attributes": onkeydown="return isNumber(event);" onkeyup="return isNumber(event);"

                 

                2. Show only the Number pad

                There a two solutions:

                a) Create a plug-in or

                b) use an existing: http://www.apex-plugin.com/oracle-apex-plugins/item-plugin/html5-input-item_107.html

                 

                Note: This is not my plugin and not my web side. Please read all terms and agreements of this web side.

                 

                regards

                 

                Joe