Javascript to highlight current field text

[Steve Workings]

I can't quite figure out the javascript to highlight the current input text control contents. I'm using the OnFocus event and while I'm returning the correct vname, it doesn't work:

var vname = '{grid.Object}.V.R' + {Grid.RowNumber} + '.VENDORNAME';
document.getElementById(vname).select();

Any ideas?

[Jim Coltz]

Re: Javascript to highlight current field text

$(this).select();

Seems to work for both grids and dialogs.

[Steve Workings]

Re: Javascript to highlight current field text

Yup, works nicely Jim, thanks. I came close to that a time or two but close only counts in horseshoes, hand grenades, bumper pool, cement work and nuclear war.

[MRTankle]

Re: Javascript to highlight current field text

Well they must have changed something in V12 as it does not work properly in dialog or grid.

[TheSmitchell]

Re: Javascript to highlight current field text

Well they must have changed something in V12 as it does not work properly in dialog or grid.

What version of 12? What browser? What does your code look like?

I tried the code below and things appear to work just fine in a grid & a UX:

$(this).select();

But maybe my version is not the same as yours? 12.3 Build 2128

It should be noted that the code in the OP should say {grid.ComponentName}, not {grid.Object}, when specifying the ID for the text area.

[MRTankle]

Re: Javascript to highlight current field text

I have a field, for example, on the second pane of the detail section of a grid.

• defined as testbox
• display format is pre-defined $123,456.78
• client side properties checked - type number
• format definition: number can be blank; blank is 0, thousands separator
• in OnFocus I placed $(this).Select();

When the field displays the amount of 32.89 properly shows as $32.89.
When I tab into the field, the dollar sign goes away and the cursor is between the 3 and the 2.
What I want to happen is have the whole field selected, so if I type in a new number the entire previous number is removed. So if I type in an 8, I wind up with 382 instead of just an 8
I realize the little x is there to clear the field, but that's not normal entry.
I hope I made myself clear. TIA.

[TheSmitchell]

Re: Javascript to highlight current field text

in OnFocus I placed $(this).Select();

Did you capitalize select()? JavaScript is case sensitive. So, $(this).Select() would be an error. You should have $(this).select();

[MRTankle]

Re: Javascript to highlight current field text

$(this).select(); is what I have.

[TheSmitchell]

Re: Javascript to highlight current field text

Okie dokie. I made the changes you listed here & get similar behavior in both V11 and V12, so this isn't anything new.

Alpha has some event listeners setup that execute on focus when you have a mask defined for a text box. These remove the $ and thousand separator (and whatever else needs to go) from the number before permitting data entry. These pre-parsing functions are calling A5.edit.setSelection, which is probably happening after your select() is called --- so, that's going to undo all your work.

You could try wrapping the select call in a setTimeout. There will be a slight delay with the highlighting. You may be able to change 100 to a smaller value. It depends on how much time it takes the client's browser to execute the other event handlers:

setTimeout(function (){ $('{grid.componentName}.V.R{grid.rowNumber}.FIELD_NAME').select(); }, 100);

If having a delay is bothersome, then you could write your own bit of code to pre-parse & set the value in the field before calling select() in the onFocus event --- eg, doing what alpha is already doing for you when removing the $ and , from the field before allowing data entry. You would no longer need setTimeout. Alpha has encapsulated all masking & parsing code in the {grid.object}._fieldHelpers_G['FIELD_NAME'] object. Look at _editFocus and see what's going on in there. You should be able to figure out how to replicate the same functionality with quite a bit of investigation.

Or, you could just be really really lazy and copy-paste the entire _editFocus function and replace all instances of A5.edit.setSelection(ele, sel.start) with ele.select(). You'd put this in one of your client-side events, like... onGridRenderComplete or something (somewhere after the field helpers object has been defined & initialized.)

{grid.object}._fieldHelpers_G['FIELD_NAME']._editFocus = function(e, ele) {
        this._editTargetId = ele.id;
        // omitted code for brevity; you actually want to copy the entire function here and only modify the 2 A5.edit.setSelection lines

        if (this.format.type == 'mask') {
                // omitted code...

                ele.select();//A5.edit.setSelection(ele, sel.start);
                // more omitted code...
        } else if (this.format.type == 'number') {
            // omitted code...

            ele.select();//A5.edit.setSelection(ele, sel.start);
        }
};

You'll want to retrieve the full function from alpha's A5.Edit class. Search for the _editFocus function inside the A5.Edit.prototype definition in alpha's published .js files for your grid. The file will be named something like a5-23945478.js (the number part will be different on your end.) Your _editFocus function definition may be different from mine, so you'll want to look it up yourself. Chrome has a make pretty button that makes it easier to read alpha's js files, but it might not be necessary. Alpha didn't minify the entire file, so a lot of the A5 javascript is already readable.

Have fun!