Class CvsTextField

A control that supports text entered from the keyboard

The ← and → keys move the text-insertion-point within the text. Used in combination with the shift key it enables part or all of the text to be selected. The entire text can be selected with the Ctrl ⊕A or Cmd ⊕A keys.

Selected text can be copied with the Ctrl ⊕C or Cmd ⊕C keys and pasted at the current text-insertion-point with the Ctrl ⊕V or Cmd ⊕V keys. The Ctrl ⊕X or Cmd ⊕X keys will cut (and copy) the selected text.

If no text is selected then the arrows keys can move off the current control to another. This only works if each textfield has a unique index number (>0;).

If the control has the index value 'idx' then the next control depends on the arrow key pressed -

←  idx - 1
→  idx + 1 
↑  idx - offset 
↓  idx + offset

The offset value is set when initialising the idx value with the index(idx, deltaIndex) method.

No other controls can be used while a textfield control is active. Pressing ↵ (Enter / Return)or attempting to move to a non-existant textfield deactivates the current textfield.

The user can provide their own validation function which is checked when the textfield is deativated.

Accessors

hasValidText

get hasValidText(): boolean
True if there is some text and it has been accepted by a validation function. If there is no text then this will be false.

Returns boolean
- Defined in index.ts:6179

id

get id(): string
The unique identifier for this control.

Returns string
Inherited from CvsText.id
- Defined in index.ts:2354

isEnabled

get isEnabled(): boolean
This is true if the control can respond to UI events else false.

Use enable() and disable() to enable and disable it.
Returns boolean
Inherited from CvsText.isEnabled
- Defined in index.ts:2381

isOpaque

get isOpaque(): boolean
This is true if the control background is opaque else false.

Use opaque() and transparent() display / hide the background.
Returns boolean
Inherited from CvsText.isOpaque
- Defined in index.ts:2719

isValid

get isValid(): boolean
True if the text has passed validation. If there is no validation function this is always true.

Returns boolean
- Defined in index.ts:6171

isVisible

get isVisible(): boolean
This is true if the control is visible else false.

Use hide() and show() to set visibility.
Returns boolean
Inherited from CvsText.isVisible
- Defined in index.ts:2387

type

get type(): string
The type name for this control.
(type name = class name without the Cvs prefix)

Returns string
Inherited from CvsText.type
- Defined in index.ts:2360

Methods

addChild

addChild(child: any, rx?: number, ry?: number): any
Add a child to this control using its relative position [rx, ry]. If rx and ry are not provided then it uses the values set in the child.
Parameters
- child: any
  is the actual control or its id
- Optionalrx: number
- Optionalry: number
Returns any
this control
Inherited from CvsText.addChild
- Defined in index.ts:2471

config

config(cfg: any): CvsTextField
Execute one or more configuration methods on this control.

The parameter is a user defined object where each field is the name of a configuration method and its value is the method's parameter(s). Multiple parameters should be in an array and use 'undefined' if the method expects no parameters.

This object will change the color scheme, text size and alignment, it will also make sure it is visible.
```
{ scheme : 'red', textSize : 12, textAlign: ['left', 'top'], show : undefined }
```
If the field name does not exist or not a valid function of this control it will be silently ignored.

There is no error checking on the parameters, it is up to the user to ensure they are valid for the control method.
Parameters
- cfg: any
  the configuration object
Returns CvsTextField
this control
Inherited from CvsText.config
- Defined in index.ts:2983

corners

corners(...c: any): number[] | CvsControl
Get or set the corner radii used for this control.

To set the radii the parameters must be one of the following
- an array of 4 numbers.
- a comma seperated list of 4 numbers.
- a single number to be used for all 4 radii.
If no parameter is passed or does not match one of the above then an array of the currently used radii values.
Parameters
- ...c: any
  valid radii combination
Returns number[] | CvsControl
an array of the currently used radii values
Inherited from CvsText.corners
- Defined in index.ts:2784

disable

disable(cascade?: boolean): CvsControl
Disables this control.
Parameters
- Optionalcascade: boolean
  if true disable child controls
Returns CvsControl
this control
Inherited from CvsText.disable
- Defined in index.ts:2895

enable

enable(cascade?: boolean): CvsControl
Enables this control.
Parameters
- Optionalcascade: boolean
  if true enable child controls
Returns CvsControl
this control
Inherited from CvsText.enable
- Defined in index.ts:2879

hide

hide(cascade?: boolean): CvsControl
Make this control invisible.
Parameters
- Optionalcascade: boolean
  if true hide any children
Returns CvsControl
this control
Inherited from CvsText.hide
- Defined in index.ts:2924

index

index(idx: number, deltaIndex?: number): CvsTextField
Set a unique index number for this text field.
Parameters
- idx: number
  unique index number
- OptionaldeltaIndex: number
  relative link when using up/down arrow keys
Returns CvsTextField
this control
- Defined in index.ts:6117

leaveParent

leaveParent(): CvsPin
Remove this control from its parent
Returns CvsPin
this control
Inherited from CvsText.leaveParent
- Defined in index.ts:2517

moveBy

moveBy(x: number, y: number): CvsTextField
Move this control relative to current position.
Parameters
- x: number
  horizontal distance
- y: number
  vertical distance
Returns CvsTextField
this control
Inherited from CvsText.moveBy
- Defined in index.ts:2426

moveTo

moveTo(x: number, y: number): CvsTextField
Move this control to an absolute position.
Parameters
- x: number
  horizontal position
- y: number
  vertical position
Returns CvsTextField
this control
Inherited from CvsText.moveTo
- Defined in index.ts:2414

noIndex

noIndex(): CvsTextField
Removes the link index from this textfield. After this it will not be possible to move focus to this textfield using the keyboard arrows.

Returns CvsTextField
this control
- Defined in index.ts:6134

opaque

opaque(alpha?: number): CvsControl
Makes the controls background opaque. The actual color depends on the controls color scheme.

The second parameter, alpha, is optional and controls the level of opaqueness from 0 - transparent to 255 - fully opaque (default value).
Parameters
- alpha: number = 255
  alpha value for controls background color.
Returns CvsControl
this control
Inherited from CvsText.opaque
- Defined in index.ts:2942

parent

parent(parent: any, rx?: number, ry?: number): CvsPin
Adds this control to another control which becomes its parent.
Parameters
- parent: any
  is the parental control or its id
- Optionalrx: number
  x position relative to parent
- Optionalry: number
  y position relative to parent
Returns CvsPin
this control
Inherited from CvsText.parent
- Defined in index.ts:2455

removeChild

removeChild(child: any): CvsTextField
Remove a child control from this one so that it stays in same screen position.
Parameters
- child: any
  the control to remove or its id
Returns CvsTextField
this control
Inherited from CvsText.removeChild
- Defined in index.ts:2494

scheme

scheme(name?: string, cascade?: boolean): ColorScheme | CvsControl
If the name of a valid color scheme is provided then it will use it to display the control, non-existant scheme names will be ignored. In both cases this control is returned.

If there is no parameter it returns the name of the current color scheme used by this control.
Parameters
- Optionalname: string
  the color scheme name e.g. 'blue'
- Optionalcascade: boolean
  if true propogate scheme to all child controls.
Returns ColorScheme | CvsControl
this control or the control's color scheme
Inherited from CvsText.scheme
- Defined in index.ts:2755

setAction

setAction(event_handler: Function): CvsTextField
This sets the event handler to be used when this control fires an event. The parameter can take one of three forms:
1. Arrow function definition
2. Anonymous function definition
3. Named function declaration
Parameters
- event_handler: Function
  the function to handle this control's events.
Returns CvsTextField
this control
Inherited from CvsText.setAction
- Defined in index.ts:2813

setEnabled

setEnabled(enable: boolean, cascade?: boolean): CvsPin
An alternative to the enable / disable methods.
Parameters
- enable: boolean
  true / false
- Optionalcascade: boolean
  true apply to all children
Returns CvsPin
this control
Inherited from CvsText.setEnabled
- Defined in index.ts:2565

setTextValid

setTextValid(): CvsTextField
If the text is invalid this method sets the text as being valid and changes the visual appearance accordingly. This will remain in effect until the next time the text is validated.
Returns CvsTextField
this control
- Defined in index.ts:6189

setVisible

setVisible(visible: boolean, cascade?: boolean): CvsPin
An alternative to the show / hide methods.
Parameters
- visible: boolean
  true / false
- Optionalcascade: boolean
  if true hide children
Returns CvsPin
this control
Inherited from CvsText.setVisible
- Defined in index.ts:2605

show

show(cascade?: boolean): CvsControl
Make this control visible.
Parameters
- Optionalcascade: boolean
  if true then show any children
Returns CvsControl
this control
Inherited from CvsText.show
- Defined in index.ts:2911

shrink

shrink(rsW?: number, rsH?: number): CvsTextField
Resize the control to fit the face content (text and/or icon).

The parameter values control which dimension(s), width and/or height, are changed and their minimum.
Parameters
- rsW: number = 0
  if ≤0 then leave the width unchanged otherwise it is the minimum width allowed after resizing.
- rsH: number = 0
  if ≤0 then leave the height unchanged otherwise it is the minimum height allowed after resizing.
Returns CvsTextField
this control
Inherited from CvsText.shrink
- Defined in index.ts:4140

text

text(text?: string): string | CvsTextField
Gets or sets the current text. Any EOL characters are stripped out of the string. If necessary the string length will be reduced until it will fit inside the textfield. If a validation function has been set then the string will be validated.
Parameters
- Optionaltext: string
  a string representing text to display
Returns string | CvsTextField
this control for setter
Overrides CvsText.text
- Defined in index.ts:6151

textFont

textFont(font?: string | object): CvsTextField
If no parameter is passed then the current font family name will be returned.

If a parameter is provided it will be accepted if it is one of the following :-
- The font family name of a TTF system font e.g. 'arial', 'courier new', 'times new roman' ...
- The name of a logical font e.g. 'serif', 'sans-serif', 'monospace' ...
- A font loaded in p5js with the loadFont() function.
Any other parameter value will display a warning and be ignored leaving the font unchanged.
Parameters
- Optionalfont: string | object
  system or logical font, a FontFace object or a p5js font object.
Returns CvsTextField
this control
Inherited from CvsText.textFont
- Defined in index.ts:4032

textStyle

textStyle(style?: string, slant?: number): any
Sets or gets the local text style.

The following strings are recognised as valid styles :-
```
'normal'  'bold'  'thin'  'italic'  
'bold italic'  'thin italic'  'oblique'
```
It will also accept the 4 p5js constants :-
```
NORMAL    BOLD   ITALIC   BOLDITALIC
```
If the 'oblique' style is specified then the parameter 'slant' is the angle (degress) that the font is tilted from the vertical. An angle of +14° is the equivalent to 'italic' and 'normal' is 0°.

Unrecognized styles are ignored and the local style is left unchanged.

If no parameter is passed then the current style is returned.
Parameters
- Optionalstyle: string
  the font style to use.
- slant: number = 0
  the oblique slant angle (degrees)
Returns any
this control
Inherited from CvsText.textStyle
- Defined in index.ts:4065

tipTextSize

tipTextSize(tsize?: number): CvsTextField
Sets the size of the text to use in the tooltip.
Parameters
- Optionaltsize: number
  text size for this tooltip
Returns CvsTextField
Inherited from CvsText.tipTextSize
- Defined in index.ts:2868

tooltip(tiptext: string): CvsTextField
Create a tooltip for this control.
Parameters
- tiptext: string
  the text to appear in the tooltip
Returns CvsTextField
this control
Inherited from CvsText.tooltip
- Defined in index.ts:2853

transparent

transparent(): CvsControl
Makes the controls background fully transparent.
Returns CvsControl
this control
Inherited from CvsText.transparent
- Defined in index.ts:2953

validation

validation(vfunc: Function): CvsTextField
Set the validation function to be used for this control.

The function is created by the user and should accept a single string parameter, the text to be validated and return an array of two elements e.g. [valid, valid-text]

valid is a boolean indicating if the text entered is valid and
valid-text can be the original text or amended in some way.

For instance a textfield used for getting a persons name will be valid if there are 2 or more words and the valid-text will be the name but with the first letter of each word being capitalised.
Parameters
- vfunc: Function
  the validation function
Returns CvsTextField
this control
- Defined in index.ts:6214

Class CvsTextField

A control that supports text entered from the keyboard

Index

Accessors

Methods

Accessors

hasValidText

Returns boolean

id

Returns string

isEnabled

Returns boolean

isOpaque

Returns boolean

isValid

Returns boolean

isVisible

Returns boolean

type

Returns string

Methods

addChild

Parameters

Returns any

config

Parameters

Returns CvsTextField

corners

Parameters

Returns number[] | CvsControl

disable

Parameters

Returns CvsControl

enable

Parameters

Returns CvsControl

hide

Parameters

Returns CvsControl

index

Parameters

Returns CvsTextField

leaveParent

Returns CvsPin

moveBy

Parameters

Returns CvsTextField

moveTo

Parameters

Returns CvsTextField

noIndex

Returns CvsTextField

opaque

Parameters

Returns CvsControl

parent

Parameters

Returns CvsPin

removeChild

Parameters

Returns CvsTextField

scheme

Parameters

Returns ColorScheme | CvsControl

setAction

Parameters

Returns CvsTextField

setEnabled

Parameters

Returns CvsPin

setTextValid

Returns CvsTextField

setVisible

Parameters

Returns CvsPin

show

Parameters

Returns CvsControl

shrink

Parameters