▼

◀

▶

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9

Demo 10

Demo 11

Demo 12

With inputbox and editable items

note : you can move between all editable area with left and right arrow.
This feature can be desactivated

initial item 1x

Without inputbox and with editable items

note : you can move between all editable area with left and right arrow
This feature can be desactivated

initial item 1x

Without initial value

With inputbox and without editable items

initial item 1x

Without inputbox and without editable items

initial item 1x

With validation

note : enter only digits

1234x

With custom separator

note : you can use semi-colon for separate item
You also can use an array of separators

initial item 1x

With a submit form

note : after submit, see url

With a submit form - submit only validated value

note : after submit, see url
enter only digits

With a max number of items

note : you can only add 3 items

initial item 1x

Without close button

note : you can specify if you want close button :
- only on validated value
- only on unvalidated value
- never
- always

Without anim

initial item 1x

EXPERIMENTAL: dojox.form.ListInput -- APIs subject to change without notice.

_setReadOnlyInputAttr dojox_form_ListInput_0 false

_createInputBox dojox_form_ListInput_0 false

DEPRECATED: dojox.form._ListInputInputItem::attr() is deprecated. Use get() or set() instead, called from function(_20){ var _21=[]; _20=_20||this._nullValidator; for(var i in this._items){ var _22=this._items[i]; if(_22===null){ continue; } var _23=_22.attr("value"); if(_20(_23)){ _21.push(_23); } } return _21; } -- will be removed in version: 2.0

DEPRECATED: dijit.InlineEditBox::attr() is deprecated. Use get() or set() instead, called from function(){ return (!this.readOnlyItem&&this._started?this._editBox.attr("value"):this.value); } -- will be removed in version: 2.0

DEPRECATED: dojox.form._ListInputInputBox::attr() is deprecated. Use get() or set() instead, called from function(_7){ if(this._count>=this.maxItems&&this.maxItems!==null){ return; } this._lastValueReported=this._getValues(); if(!dojo.isArray(_7)){ _7=[_7]; } for(var i in _7){ var _8=_7[i]; if(_8===""||typeof _8!="string"){ continue; } this._count++; var re=new RegExp(this.regExpGen(this.constraints)); this._lastAddedItem=new dojox.form._ListInputInputItem({"index":this._items.length,readOnlyItem:this.readOnlyItem,value:_8,regExp:this.regExpGen(this.constraints)}); this._lastAddedItem.startup(); this._testItem(this._lastAddedItem,_8); this._lastAddedItem.onClose=dojo.hitch(this,"_onItemClose",this._lastAddedItem); this._lastAddedItem.onChange=dojo.hitch(this,"_onItemChange",this._lastAddedItem); this._lastAddedItem.onEdit=dojo.hitch(this,"_onItemEdit",this._lastAddedItem); this._lastAddedItem.onKeyDown=dojo.hitch(this,"_onItemKeyDown",this._lastAddedItem); if(this.useAnim){ dojo.style(this._lastAddedItem.domNode,{opacity:0,display:""}); } this._placeItem(this._lastAddedItem.domNode); if(this.useAnim){ var _9=dojo.fadeIn({node:this._lastAddedItem.domNode,duration:this.duration,easing:this.easingIn}).play(); } this._items[this._lastAddedItem.index]=this._lastAddedItem; if(this._onChangeActive&&this.intermediateChanges){ this.onChange(_8); } if(this._count>=this.maxItems&&this.maxItems!==null){ break; } } this._updateValues(); if(this._lastValueReported.length==0){ this._lastValueReported=this.value; } if(!this.readOnlyInput){ this._input.attr("value",""); } if(this._onChangeActive){ this.onChange(this.value); } this._setReadOnlyWhenMaxItemsReached(); } -- will be removed in version: 2.0

_setReadOnlyInputAttr dojox_form_ListInput_0 false

_createInputBox dojox_form_ListInput_0 false

_setReadOnlyInputAttr dojox_form_ListInput_1 false

_createInputBox dojox_form_ListInput_1 true

_setReadOnlyInputAttr dojox_form_ListInput_1 false

_createInputBox dojox_form_ListInput_1 true

_setReadOnlyInputAttr dojox_form_ListInput_1 true

_createInputBox dojox_form_ListInput_1 true

_createInputBox dojox_form_ListInput_2 false

_setReadOnlyInputAttr dojox_form_ListInput_3 false

_createInputBox dojox_form_ListInput_3 false

_setReadOnlyInputAttr dojox_form_ListInput_3 false

_createInputBox dojox_form_ListInput_3 false

_setReadOnlyInputAttr dojox_form_ListInput_4 false

_createInputBox dojox_form_ListInput_4 true

_setReadOnlyInputAttr dojox_form_ListInput_4 false

_createInputBox dojox_form_ListInput_4 true

_setReadOnlyInputAttr dojox_form_ListInput_4 true

_createInputBox dojox_form_ListInput_4 true

_setReadOnlyInputAttr dojox_form_ListInput_5 false

_createInputBox dojox_form_ListInput_5 false

_setReadOnlyInputAttr dojox_form_ListInput_5 false

_createInputBox dojox_form_ListInput_5 false

_setReadOnlyInputAttr dojox_form_ListInput_6 false

_createInputBox dojox_form_ListInput_6 false

_setReadOnlyInputAttr dojox_form_ListInput_6 false

_createInputBox dojox_form_ListInput_6 false

_setReadOnlyInputAttr dojox_form_ListInput_7 false

_createInputBox dojox_form_ListInput_7 false

_setReadOnlyInputAttr dojox_form_ListInput_7 false

_createInputBox dojox_form_ListInput_7 false

_setReadOnlyInputAttr dojox_form_ListInput_8 false

_createInputBox dojox_form_ListInput_8 false

_setReadOnlyInputAttr dojox_form_ListInput_8 false

_createInputBox dojox_form_ListInput_8 false

_setReadOnlyInputAttr dojox_form_ListInput_9 false

_createInputBox dojox_form_ListInput_9 false

_setReadOnlyInputAttr dojox_form_ListInput_9 false

_createInputBox dojox_form_ListInput_9 false

_createInputBox dojox_form_ListInput_10 false

_setReadOnlyInputAttr dojox_form_ListInput_11 false

_createInputBox dojox_form_ListInput_11 false

_setReadOnlyInputAttr dojox_form_ListInput_11 false

_createInputBox dojox_form_ListInput_11 false

ListInput

Actions

Demos

With inputbox and editable items

Without inputbox and with editable items

Without initial value

With inputbox and without editable items

Without inputbox and without editable items

With validation

With custom separator

With a submit form

With a submit form - submit only validated value

With a max number of items

Without close button

Without anim