Wijmo UI for the Web
Common Input Features
The following features are found in the Input core, and are available to all of the Input Widgets.
Drop down for a table with descriptions of features common to all input widgets
| Features | API | Type | Comments |
|---|---|---|---|
| Specify null text | placeholder option | string | Determines the text to display when the widget is blank and contains no initial text. |
| Change the location of the trigger, or hide it | dropDownButtonAlign and showDropDownButton options |
string bool |
Valid values: 'left', 'right' Sets where to display the drop-down button. Sets whether to display the drop-down button. |
| ImeMode setting | imeMode option | string | Valid values: 'auto', 'active', 'inactive', 'disabled' Specifies whether and how to allow Chinese, Japanese, and Korean characters to be entered. |
| Move focus using the arrow key | blurOnLeftRightKey option | string | Valid values: 'none', 'left', 'right', 'both' Specifies whether and how to shift focus to the next control in the tab order when the user presses the arrow keys. |
| Move focus after input is complete | blurOnLastChar option | bool | Specifies whether to automatically shift focus to the next control in the tab order when the input is complete. |
| Customized spin and dropdown button display and alignment | spinnerAlign option | string | Valid values: 'bothSideDownLeft', 'bothSideUpLeft', 'horizontalDownLeft', 'horizontalUpLeft', 'vertical' |
| Wrap value during spin | allowSpinLoop option | bool | Determines whether the spinner moves to the minimum value when it reaches the maximum, or to the maximum when it reaches the minimum. |
| Tab action for control or field | tabAction option | string | Valid values: 'control', 'field' Determines whether the tab key moves focus between controls or between fields within the control. |
| Display only | readonly option | bool | Determines whether the user can change the displayed value. |
| Open or Close dropdown list or calendar using shortcuts | The following keyboard shortcuts work with the trigger: Alt+Up or Down to open or close the dropdown, Esc to close it, or Enter to select value from dropdown and close it. | ||
| Open or Close dropdown list or calendar programmatically | drop method | Performs the action that users perform when clicking the trigger, and drops down the | |
| Notification for dropdown open and close | dropdownOpen and dropdownClose | Allows you to add code to execute when the drop-down opens or closes. |
The following are features which have been renamed in the API. For backward compatibility, old API members still work, but we recommend using the new members, as they will be maintained into the future.
Drop down for a table of renamed features in the API
| Old API | New API | Sample code | Comments |
|---|---|---|---|
| buttonAlign | dropDownButtonAlign / spinnerAlign |
| |
| comboHeight | pickers.height | $(".selector").wijinputcore({ comboHeight: 50});
equals: $(".selector").wijinputcore({ pickers: {height: 50}});
|
|
| comboItems | pickers.list | $(".selector").wijinputcore({ comboItems: ["a","b","c"]});
equals: $(".selector").wijinputcore({ pickers: {list: ["a","b","c"]}});
|
|
| comboWidth | pickers.width | $(".selector").wijinputcore({ comboWidth: 100});
equals: $(".selector").wijinputcore({ pickers: {width: 100}});
|
|
| disableUserInput | readOnly | ||
| nullText / showNullText | placeholder | $(".selector").wijinputcore({ showNullText: true, nullText: ""});
equals: $(".selector").wijinputcore({ placeholder: ""});
|
|
| showTrigger | showDropDownButton |