Textbox with javascript that shows default text or, if user enters, '%' appears after their response

[dankpooch]

Hey all, thanks in advance for reading. 

I have a text box that needs to:

1. display a default/instructional text, "Share", when "empty''/needing input;

2. when user first focuses/clicks, "Share" is replaced by a '%' sign, which remains on the right of the users entry as they type;

3. only accepts values between 1 & 100 (plus the initial '%', and the default "Share");

3. if user leaves the field blank or '%', the field returns to "Share".

I believe what I'm looking for is a keystroke formatting script and/or an OnFocus and OnBlur script. 

Any ideas?

[dankpooch]

The method I'm using now seems clunky and doesn't correct if the user: 1. deletes the %; or 2. types on the right side of the %, which should be doable.....

//OnFocus//

event.target.alignment = "right";

if (event.target.value== event.target.defaultValue)

{ event.target.value = ""; event.target.textColor = color.black;}

//OnBlur//

var distTest = /^[1-9][0-9][\%]?$|^[1-9][\%]$|^100%$/;

if (event.target.value == "" || event.target.value == "%")

{event.target.value = event.target.defaultValue; event.target.textColor = color.ltGray; }

else if (distTest.test(event.value) == false) {event.target.strokeColor = color.red; event.target.borderStyle = border.s; }
event.target.alignment = "left";

[Bernd Alheit]

You can use a separate field for the %

[dankpooch]

A very good simplification! Thanks again.

[Thom Parker]

use a format script to display the instructional text. 

if(event.value == ""){
     event.value = "Instructions";
     event.target.textColor = ["G",.5]; // grey text
}else 
     event.target.textColor = color.black;

A keystroke script could be used to control the display of the % symbol and data entry, but this is a complicated and still somewhat clunky solution.

I belive that Bernd has the best idea. Use a second field to display the % symbol.  You'll need an OnBlur script to set it on entry and also use the format script to hide/show it after the user enters the data. 

Use a validation to set the data entry limit. 

[dankpooch]

Huge thanks here, Thom. In terms of best-practice, it is never clear to me if I should congregate codes as much as possible within a single location (e.g. format script or OnBlur) or divide them up. If i'm using a custom validation to trigger other actions in addition to the formatting changes (i.e. red highlight, square border, but also custom 'error message' field display/reveals) i.e. red highlight, square border), what is the difference between placing the whole code in a format script vs a calculation script, validation script, or OnBlur, vs splitting it up between these?

[Thom Parker]

It's a matter of placing the code where it will be most efficient/effective.  It is not possible to do everything from every event, but there are a lot of things that can be done in many different events (not all events are equal even if they can be used for the same thing). It is often difficult to choose wisely.  In your case, the format script is simple, direct, and does not interfere with any other scripts. It's an easy operation to isolate. The OnBlur is a UI event, not a value related event. It only triggeres when the user is doing something, not when the value is being changed. If you want a value based behavior, then a value based event is best, but not always easy to do, as in the case of radio buttons.  The keystroke script is very powerful, but writing good keystroke scripts is complicated.  The keystroke would work great for limiting data entry to the range.  But the validate script is so much simpler, even if the behavior isn't as nice.