10 Replies Latest reply on Mar 3, 2013 3:56 PM by Trevorׅ

    Allow only numbers to be entered in an Edit Box

    Trevorׅ Adobe Community Professional

      Does anyone know how to apply a "realtime" filter to an editbox so that only numeric can be entered

      AND

      The ordering is not messed up by use of 1) cursor keys, 2) a mouse and 3) trying to enter a non-numeric?

       

      See the below very badly scripted demonstration of the problems. I have tried various options but anything based on replace and rewriting the inputed text seems problematic.  I want to be able to add / edit the number at any position in it. i.e. change 123 to 143.

       

      Please if possible tamper with the script to get a working version.

       

      Sorry about the lack of clarity in the question

       

      w =new Window ("palette", "Gematria", undefined, {});
      g = w.add ("edittext", undefined, "",{readonly:1});
      g.characters = 50;
      g.addEventListener ("keydown", function (kd) {pressed (kd)});
      w.show()
      function pressed(k)
          {
              x=(k.keyIdentifier).replace(/U\+/,"0x");
              keyCode = parseInt((k.keyIdentifier).replace(/U\+/,"0x")) 
              if (keyCode > 47 && keyCode < 59)  g.text += keyCode-48; 3
              if (x==8) g.textselection = "";
             }
      

       

      Thanks

       

      Trevor

        • 1. Re: Allow only numbers to be entered in an Edit Box
          TᴀW Adobe Community Professional & MVP

          w =new Window ("palette", "Gematria", undefined, {});

          g = w.add ("edittext", undefined, "",);

          g.characters = 50;

          g.addEventListener ("keydown", function (kd){pressed (kd)});

           

          w.show()

          function pressed(k)

          {

               myKey = k.keyName;

               if (myKey < "0" || myKey > "9") return;

               g.textselection = myKey;

          }

           

          Ariel

          • 2. Re: Allow only numbers to be entered in an Edit Box
            Peter Kahrel Adobe Community Professional & MVP

            Trevor,

             

            Your code works fine for me. But it seems to me that your pressed function is unnecessarily complicated. To check if the input is a digit, all you need is this:

             

            if ('1234567890'.indexOf(k.keyName) > -1)
                  g.text += k.keyName;
            

            Peter

            1 person found this helpful
            • 4. Re: Allow only numbers to be entered in an Edit Box
              TᴀW Adobe Community Professional & MVP

              Hi Peter, (I see now that my previous email response was blank)

               

              this line:

               

                    g.text += k.keyName;    

              will only ever append the text to the end. Trevor wants to be able to edit the text in the normal manner ("change 123 to 143"), so I think it's necessary to use:

               

                  g.textselection = k.keyName;

               

              in that particular case.

               

              Thanks,

              Ariel

              1 person found this helpful
              • 5. Re: Allow only numbers to be entered in an Edit Box
                Trevorׅ Adobe Community Professional

                Thanks Ariel and Peter,

                 

                Ariel is correct in what he wrote "Trevor wants to be able to edit the text in the normal manner ("change 123 to 143")"

                So I do need to use g.textselection = k.keyName;

                 

                In order to avoid the invalid entries being added or the valid ones doubled I have to (I think) have the editboxes readonly value set to true

                This causes a problem with deleting numbers in the middle of the entered number.

                 

                For example:

                 

                I have the number 12345 entered and my cursor is BETWEEN the 2 and the 3 i.e. no text is selected I can't get the 2 to delete on pressing backspace or the 3 by itself i.e. with out the 4 and 5 to delete on pressing delete.

                 

                See the annotated code below.

                 

                A basic problem is not being able to get the index of the cursor if not text is selected

                 

                w =new Window ("palette");
                g = w.add ("edittext", undefined, "",{readonly:1});
                g.characters = 50;
                g.graphics.backgroundColor = w.graphics.newBrush(w.graphics.BrushType.SOLID_COLOR,[1,1,1], 1); // make look more natural
                g.addEventListener ("keydown", function (kd) {pressed (kd)});
                w.show()
                function pressed(k)
                {
                      if ('1234567890'.indexOf(k.keyName) > -1)
                      g.textselection = k.keyName;
                      if (k.keyName == "Delete") g.textselection = "\0x7f"  // Deletes ALL characters after the cursor point
                      if (k.keyName == "Backspace") g.textselection = "\0x08" // Deletes ALL characters after the cursor point
                      if (k.keyName == "Backspace") g.textselection = "\u0008" //  Places a circle at the cursor point
                }
                

                 

                p.s. no comments please on having 2 if statements for "Backspace)

                • 6. Re: Allow only numbers to be entered in an Edit Box
                  TᴀW Adobe Community Professional & MVP

                  To keep it simple, a different approach may be necessary:

                   

                  var w = new Window ("palette"),

                  g = w.add ("edittext", undefined, ""),

                  oldText = "";

                  g.characters = 50,

                  g.onChanging = function(){pressed()};

                  w.show()

                  function pressed()

                  {

                       if (g.text.match(/[^0-9]/) != null){

                           g.text = oldText;

                           return;

                       }

                       oldText = g.text;

                  }

                   

                  I didn't understand why you needed readonly set to true, so I've gotten

                  rid of it.

                   

                  HTH,

                  Ariel

                  1 person found this helpful
                  • 7. Re: Allow only numbers to be entered in an Edit Box
                    Peter Kahrel Adobe Community Professional & MVP

                    Ariel,

                     

                    > this line:  g.text += k.keyName; will only ever append the text to the end.

                     

                    Ah, you're right. I hadn't spotted that. And I only now see that you posted your reply before I did.

                     

                    Trevor --

                     

                    > A basic problem is not being able to get the index of the cursor if not text is selected

                     

                    That's the problem of the textselection property, which is entirely useless as far as I can see.

                     

                    Peter

                    • 8. Re: Allow only numbers to be entered in an Edit Box
                      Trevorׅ Adobe Community Professional

                      Thanks for the replies

                       

                      The problem with your (Ariel) sugestion is (which is behind the readonly) is that if the user enters for example 123r45 instead of displaying 12345 the edit box will display 45123 because when a replacement is made the cursor gets shifted back to position 0 instead of staying where it is.

                       

                      The main problem is the implementation of delete / backspace followed by the entry of non-numeric followed by a numeric in the correct place.

                       

                      YET ANOTHER EXAMPLE

                       

                      I enter 12345 then move the cursor to between the 3 and 4 press a non-numeric and then delete.

                       

                       

                      I am working on a solution that involves eventlisteners for mouse clicks and monitors the use of cursor keys and the use of slice.  I might then mimic a fake cursor.

                       

                      If I come up with a good solution I'll post it.

                      • 9. Re: Allow only numbers to be entered in an Edit Box
                        TᴀW Adobe Community Professional & MVP

                        Hi Trevor,

                         

                        "When a replacement is made the cursor gets shifted back to position 0

                        instead of staying where it is"

                         

                        That's not really correct at all. Replacements are made without any

                        difficulty. E.g., if you type 12345, then select 34 and type 6, you will

                        get 1265 as expected.

                         

                        Typing a non-numeric character will move the cursor to the beginning of

                        the text field, since there doesn't appear to be any way to move the

                        cursor programatically to where it was. But that's a small price to pay

                        for the simplicity of the code, I think. All other functionality is

                        available and works as expected: the user can insert, delete, replace,

                        append, move the cursor with the cursor keys, use the mouse to select

                        text and move the insertion point, etc., etc., all with 4 lines of code.

                         

                        Good enough for me, I think, but please do post your solution if you

                        manage to make it work.

                         

                        HTH,

                        Ariel

                        • 10. Re: Allow only numbers to be entered in an Edit Box
                          Trevorׅ Adobe Community Professional

                          Hi Ariel,

                           

                          Sorry for the lack of reply, been busy.

                          What I meant by "When a replacement is made the cursor gets shifted back to position 0 instead of staying where it is" was that when the script makes the replacement the cursor ...

                           

                          I think you are correct that you are getting a lot of functionality for a little code but still I would like to improve on it.

                          I do think that as one can only control the position of where the text gets entered and not the position of the cursor the final product is going to be far from graceful.

                           

                          I have not had time to work on this issue now, hope to get to it some time.

                           

                          By the way I liked you simply test for non-numerics which can be simplified to

                          if (g.text.match(/[^0-9]/))
                          

                          without the !=null

                           

                          Regards

                          Trevor

                           

                          P.s. I have another more simple (if solvable) SUI question here.