Skip to main content
Inspiring
June 24, 2013
Question

Edittext and onChanging event

  • June 24, 2013
  • 2 replies
  • 9216 views

Hi friends

I´m creating a dialog and one of the fields in this dialog should accept only numbers. So I thought I could use a combination of Regex and onChanging function with the edittex. Here´s the concept:

var dlg = new Window ("dialog", "Test", undefined);

var txt = dlg.add ("edittext", undefined, "");

txt.characters = 40;

txt.onChanging = function (){

   txt.text = txt.text.replace(/[^0123456789]/g, "");

};

dlg.show();

With this code (it´s working) I´m sure user will not be able to type letters or anything else than numbers. But the problem is: if the user hits a letter in keyboard, then, after removing correctlly the letter, the function automatically inserts the pointer of the text in the beginning of such field..So, the next key user presses, it will be inserted in the beginning of the string. And it´s a problem when inserting the text.

Is there any alternative (not necessary needs a regex) I could insert in the onChanging function, so the pointer of text always keep in the end of the field?

If my explanation and question was confused, please tell I try to explain again

Best Regards

Gustavo.

This topic has been closed for replies.

2 replies

pixxxelschubser
Community Expert
June 24, 2013

You really need the onChanging-event?

var dlg = new Window ("dialog", "Test", undefined);

ar txt = dlg.add ("edittext", undefined, "");

var txt2 = dlg.add ("edittext", undefined, "");

txt.characters = 40;

txt2.characters = 40;

txt.onChange = function (){

txt.text = txt.text.replace(/[^0-9]/g, "");

}

dlg.show();

Perhaps you should try the onChange instead.

Inspiring
June 24, 2013

I think using either onChange or onChanging to control what the user can enter into the control is less than ideal. With onChanging the use does get feedback that an incorrect char was entered but the text insertion is changed( as noted above). With onChange the user doesn't get any feedback  until the focus has changed to another control. I think onChange also has the problem that the user may not get the chance to correct the text or even know it was changed by the script. For example if the change in focus was because the user clicked on the 'run', 'ok', etc button.

A keyboard event handler stops the incorrect char from being entered into the control. The user gets feedback and doesn't have to deal with a moving insertion point.

function NumericEditKeyboardHandler (event) {

    try {

        var keyIsOK = KeyIsNumeric (event) ||

                      KeyIsDelete (event) ||

                      KeyIsLRArrow (event) ||

                      KeyIsTabEnterEscape (event);

                     

        if (! keyIsOK) {

            //    Bad input: tell ScriptUI not to accept the keydown event

            event.preventDefault();

            /*    Notify user of invalid input: make sure NOT

                to put up an alert dialog or do anything which

                requires user interaction, because that

                interferes with preventing the 'default'

                action for the keydown event */

            app.beep();

        }

    }

    catch (e) {

        ; // alert ("Ack! bug in NumericEditKeyboardHandler: " + e);

    }

}

//    key identifier functions

function KeyIsNumeric ( event ) {

    return  ( event.keyName >= '0' ) && ( event.keyName <= '9' ) && ! KeyHasModifier ( event );

}

function KeyHasModifier ( event ) {

    return event.shiftKey || event.ctrlKey || event.altKey || event.metaKey;

}

function KeyIsDelete (event) {

    //    Shift-delete is ok

    return (event.keyName == 'Backspace') && ! (event.ctrlKey);

}

function KeyIsLRArrow (event) {

    return ((event.keyName == 'Left') || (event.keyName == 'Right')) && ! (event.altKey || event.metaKey);

}

function KeyIsTabEnterEscape (event) {

    return event.keyName == 'Tab' || event.keyName == 'Enter' || event.keyName == 'Escape';

}

function createDialog( ) {

    var dlg = new Window( 'dialog', 'Example Dialog' );

    dlg.maskSt = dlg.add( 'edittext', undefined, '' );

    dlg.maskSt.preferredSize.width = 40;

    dlg.maskSt.addEventListener ('keydown', NumericEditKeyboardHandler );

   dlg.btnPnl = dlg.add( 'panel', undefined, 'Process' );

   dlg.btnPnl.orientation = "row";

   dlg.btnPnl.alignment = "right";

   dlg.btnPnl.okBtn = dlg.btnPnl.add( 'button', undefined, 'Ok', { name:'ok' });

   dlg.btnPnl.cancelBtn = dlg.btnPnl.add( 'button', undefined, 'Cancel', { name:'cancel' });

   return dlg;

};

function initializeDialog( w ) {

    w.maskSt.addEventListener ('keydown', NumericEditKeyboardHandler );

    w.maskSt.onChanging = function() {

                                    // range check if needed

                                        if( Number(this.text) < 0 || Number(this.text) > 100 ){

                                            alert('Out of range');

                                            // handle however you like

                                            this.text = '';

                                        }

                                    }

    w.btnPnl.okBtn.onClick = function ( ) { this.parent.parent.close( 1 ); };

    w.btnPnl.cancelBtn.onClick = function ( ) { this.parent.parent.close( 2 ); };

};

runDialog = function( w ) {

   return w.show( );

};

var win = createDialog();

initializeDialog( win );

runDialog( win );

Inspiring
June 25, 2013

Hi @pixxel

Thank you for the tip. At true, I always use the onChange event instead of onChanging. But I was looking for a "live" verification since, as Michael mentioned", onChange will validate the field only after pressing anyplace outside such field.

Michael, thank you very much for the example code. I was looking in the JavaScript Tools guide manual the features you wrote in the script in order to learn about it. I think I´m now understanding a little what have you done. To hard-test, I reduced your code into this (supposing the field should accept only the number 1):

function verify(event){

    if (event.keyName == "1"){

       alert("Great");

    };

    else{

       event.preventDefault();

    };   

};

var dlg = new Window ("dialog", "Test", undefined);

var field = dlg.add ("edittext", undefined, "");

field.characters = 20;

field.addEventListener ("keydown", verify);

dlg.show();

---

A question. When you are writting in the field, sometimes it allows the other keys to be inserted. I perceived it also in your example. Is it expected to happen?

Thank you very much

Gustavo.

Inspiring
June 24, 2013

I think the best way to limit what is entered into an edittext control is to set up a keyboard handler. The Adobe script 'Fit Image' and 'Image Processor' has examples.

JJMack
Community Expert
June 25, 2013

Michael L Hale wrote:

I think the best way to limit what is entered into an edittext control is to set up a keyboard handler. The Adobe script 'Fit Image' and 'Image Processor' has examples.

Mike I just noticed that the keyboard handler statements in CS6 Fit Image script have been commented out. So anything can be entered. You will get and error message if values ented are not numeric when you click OK. Do you know why?

JJMack
Inspiring
June 25, 2013

I am not sure. I seem to remember a time that I couldn't get keyboard handlers to work with CS6. Maybe there was a bug so Adobe removed the handlers until they could get it fixed. But again, I really don't know why. Although I can't think of any good reason to comment out those lines unless they didn't work.