Number editor

A control where we input numbers.

It will be formatted according to the data type, either negative or positive.
Decimal input is possible, and the range for the decimal part can be specified.
It is inputted simultaneously with focusing on the number editor.

Key action
Boundary	Key	Action
Text	Enter	Save number editor value
Clear button	SpaceBar	Delete number editor value
Clear button	Enter	Delete number editor value

Change text and value depending on the clear action
Action method	Delete text	Delete value
Click clear button	O	X
Input esc key	O	X
Call clear() API	O	O
Inputting space or pressing the enter key on the clear button	O	O

Web accessibility

You should provide a label.

Provide a number editor label by configuring fieldLabel property.

Case when you need a focus on the clear button

If you set the value of the buttonFocusable attribute to true, you can move the focus to the clear button using the tab key.

Support for input masks

If it is an input that does not support real-time masks, after removing the values that do not match the mask, formatting is applied.
Formatting occurred: Valid value input, text deletion, and value-change event in the UI

Real-time mask support based on browser-specific input methods
browser	Input half-width character	Input full-width character and language
Safari 11	O	O
Internet Explorer 10,11	O	X (Force change into english inputter)
FireFox 59	O	X (Force change into english inputter)
Edge 41	O	X
Chrome 65	O	X

Control component

Explanation on the composition of number editor screen

Control component

Component

Component	Type	Description
text	String	Text shown on the number editor.
upButtonImage	String	upButtonImage that is used for the number editor.
downButtonImage	String	downButtonImage that is used for number editor.
clearButtonImage	String	clearButtonImage that is used for number editor.

Example: Using the component

var numberEditor = app.lookup("nbe1");
numberEditor.value = 2018;

/* Text displayed on the number editor */
console.log(numberEditor.text);

/* Number editor upButtonImage configuration */
numberEditor.upButtonImage = "./upBtnImgSrc";

/* Number editor downButtonImage configuration */
numberEditor.downButtonImage = "./downBtnImgSrc";

/* Number editor clearButtonImage configuration */
numberEditor.clearButtonImage = "./clearBtnImgSrc";

Related API : text , upButtonImage , downButtonImage , clearButtonImage , NumberEditor API overview

Style component

Theme file: number-editor.part.less

CSS style composition

Component

Component	Description
cl-numbereditor	Number editor style.
cl-text	Style for the text of the number editor.
cl-numbereditor-increase	Style for the image of the number editor increase button.
cl-numbereditor-decrease	Style for the image of the number editor decrease button.
cl-numbereditor-clear	Image for the clear button of the number editor.

State element

Component	State element	Description
cl-numbereditor-increase	hover	Style when the number editor increase button has been hovered.
cl-numbereditor-increase	active	Style when the number editor increasse button has been active(clicked).
cl-numbereditor-decrease	hover	Style when the number editor decrease button has been hovered.
cl-numbereditor-decrease	active	Style when the number editor decrease button has been active(clicked).

Changing the style property by using the CSS file

@CHARSET "UTF-8";

/* Default style of the number editor */
.cl-numbereditor {
	font: 11pt sans-serif;
	border: 1px soild red;
	color: green;
}

/* Increase button of the number editor */
.cl-numbereditor .cl-numbereditor-buttons .cl-numbereditor-increase{
	background-image: url(icons/up-spin.png)
}

/* When number editor increase button has been hovered */
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-increase:hover{
	background-image: url(icons/up-spin-hover.png);
  	background-color: #1F8BF0;
}

/* When number editor decrease button has been active */
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-decrease:active{
  	background-image: url(icons/down-spin-active.png);
  	background-color: #1369C5;
}

/* When clear button of the number editor is active */
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-clear:active{
	background-color: #1F8BF0;
}

Styler composition

Changing style property by using the styler

// UI Configuration
var numberEditor_1 = new cpr.controls.NumberEditor("nbe1");

/* Default style of the number editor */
/* Multiple settings can be configured using JSON data. */
numberEditor_1.style.css({
	"border": "2px solid red",
	"color": "green"
});

/* Default style of the number editor */
/* When setting a single style, you can configure it as follows. */
numberEditor_1.style.css("border", "2px solid red");


/* Style for the clear button of the number editor */
numberEditor_1.style.clear.css("background-color", "black");

Example

Creating the number editor

Example for creating the number editor.

var numberEditor_1 = new cpr.controls.NumberEditor("nbe1");
numberEditor_1.value = 2018;

console.log(numberEditor_1.text);
console.log(numberEditor_1.length);

/* Configure the increase value of the number editor */
numberEditor_1.step = 10;

/* Configure the minimum value of the number editor */
numberEditor_1.min = 20;

/* Configure the maximum value of the number editor */
numberEditor_1.max = 80;

Related API: value , text , step , min , max , length , NumberEditor API overview

Number editor text editing

Example of specifying number editor format and autoSelect.

var numberEditor_1 = new cpr.controls.NumberEditor("nbe1");
/* Option -> s : Negative number/positive number, 0 : number */
numberEditor_1.format = "s00.00";

numberEditor_1.value = "";
numberEditor_1.format = "s#0.00";
/*display: 0.00*/

numberEditor_1.value = "-123456.123";
/*display: -123456.12 */


/* Select every data in the editing boundary, when focused  */
numberEditor_1.autoSelect = true;

Related API: format , autoSelect , NumberEditor API overview

Edit number editor spin button

Example for explaining number editor spin button.

var numberEditor_1 = new cpr.controls.NumberEditor("nbe1");
/* Existence of the number editor spin button */
numberEditor_1.spinButton = true;

/* Edit upButtonImage number editor */
numberEditor_1.upButtonImage = "./upBtnImgSrc";

Display setting of clear button

You can display a clear button depending on the value of the showClearButton property of the number editor. The default value is false. You can use the clearButtonImage property to set an image for the clear button. The clear button is only displayed when there is text in the input area.

var numberEditor_1 = new cpr.controls.NumberEditor("nbe1");
//Configure clear button image 
numberEditor_1.clearButtonImage = "../tomato.png";

//Display clear button
numberEditor_1.showClearButton = true;