behavior: number

Number input element behavior. If element has step attribute defined then it will rendered with spin buttons.

Elements

that have this behavior applied by default (see master style sheet):

  • <input type=“number” /> - inline single line
  • <widget type=“number”></widget>

Attributes

that this behavior knows about:

  • value=integer - initial value of the input element
  • size=integer - determines value of (intrinsic and default) width of the element. Default value is 20.
  • minvalue=integer - determines minimum value of the element.
  • maxvalue=integer - determines maximum value of the element.
  • step=integer - if provided shows spin buttons, click on them increments the value correspondingly to this attribute.

If user will input value that is out of minvalue..maxvalue range then the behavior will create attribute invalid in the element. Therefore element can be styled separately for invalid state.

size, step, minvalue and maxvalue attributes can also be defined in CSS as custom attributes -size, -step, -minvalue and -maxvalue correspndingly. Thus you may define it for group of input elements as:

input.numeric 
{
  behavior:number;
  -step:"1"; 
  -minvalue:"0";
  -maxvalue:"100";
}

Events

Together with the standard set of events (mouse, keyboard, focus) behavior: button generates:

  • EDIT_VALUE_CHANGED event - value of the element was changed due to user actions. Posted (asynchronous) event.
  • EDIT_VALUE_CHANGING event - sent when value of the element is about to change. Synchronous event.

Value

type json::value::V_INT, reflects current status of internal editing buffer.

Special key combinations

See edit

Methods

The behavior supports following xcall() methods (see dom::element::xcall() function):

  • xcall(“min”): int - returns min limit;
  • xcall(“min”, v:int) - sets min limit;
  • xcall(“max”): int - returns max limit;
  • xcall(“max”, v:int) - sets max limit;
  • xcall(“step”): int - returns step value;
  • xcall(“step”, v:int|undefined) - sets/clears step;

Note that in Sciter you can access these methods simply as:

  var edit = self.select("input[type='number']");
  edit.min(123);
  var m = edit.min();

Same notation can be used in CSSS!

h-smile/built-in-behaviors/number.txt · Last modified: 2009/12/15 12:41 by andrew
chimeric.de = chi`s home Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0