Allow only numbers to be entered in an Edit Box

[Trevor:]

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

[TᴀW]

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

[Trevor:]

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)

[TᴀW]

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

[Peter Kahrel]

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

[TᴀW]

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

[Peter Kahrel]

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

[Trevor:]

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.

[TᴀW]

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

[Trevor:]

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.