Text Fields

The Enyo framework provides the Input, PasswordInput, and RichText controls to meet your text entry needs.

Input

An Input is a single-line text input control that supports auto-correction and hint text, and has default visual styling. To create an Input, do the following: 

{kind: "Input", hint: "type something here", onchange: "inputChange"}

The value property specifies the text displayed in the input. The onchange event fires only when the input blurs (loses focus).

Other noteworthy events include oninput, which you can use to get notifications as the content of the input changes, and onkeypress, which may be handled so as to filter out invalid characters before they appear in the input.

It is common to use getValue and setValue to get and set the value of an input. For example, to set the value of one input to that of another: 

buttonClick: function() {
  var x = this.$.input1.getValue();
  this.$.input2.setValue(x);
}

On its own, an unfocused input is rather amorphous in appearance, so you will commonly find an input nested inside another control, such as a RowGroup: 

{kind: "RowGroup", caption: "I'm the RowGroup's caption...", components: [
  {kind: "Input",
      components: [
          {kind: "Button", caption: "OK", onclick: "buttonClick"}
      ],
      hint: "I'm an Input inside a RowGroup..."
  }
]}

Input inside in a RowGroup

Published Properties

The enyo.Input kind provides access to the following published properties:

Property Default Description
hint 
enyo._$L("Tap Here To Type")
Hint text displayed when the input is empty and unfocused.
value "" Current value of the input
tabIndex "" Tab index of the input
spellcheck true If true, applies spell-checking to the entered text.
autocorrect true If true, applies auto-correction to the entered text.
autoKeyModifier "" Possible settings are "num-lock", "caps-lock", "shift-lock", "shift-single", and "num-single".
autoCapitalize "sentence" Possible settings are "sentence", "title", and "lowercase".
autoEmoticons false If true, enables auto-emoticons.
autoLinking false If true, enables auto-linking.
autoWordComplete true If true, enables automatic word completion.
inputType "" Specifies the "type" attribute on the input field. On webOS, this modifies the virtual keyboard layout. Supported values are "email" and "url".
inputClassName "" CSS class to apply to the inner input control
focusClassName "enyo-input-focus" CSS class to apply on focus
spacingClassName "enyo-input-spacing" CSS class to control spacing of inner controls
alwaysLooksFocused false If true, makes the input look focused when it's not.
selection null

An object describing the selected text. The start and end properties specify the zero-based starting and ending indices of the selection.

For example, if the value of an input is "Value" and getSelection returns {start: 1, end: 3}, then "al" is selected.

To select "alu", call this.$.input.setSelection({start: 1, end: 4});

disabled false If true, disables the input.
changeOnInput false If true, fires the onchange event as well as the oninput event whenever the content is changed.
keypressInputDelay 0 Number of milliseconds to delay the input event when a key is pressed. If another key is pressed within the delay interval, the input will be postponed and fired once only after the delay has elapsed without a key being pressed.
styled true If true, applies default styling to the input.
selectAllOnFocus false If true, selects all text when the input gains focus.

PasswordInput

PasswordInput, which extends enyo.Input, is a single-line text input control for typing in passwords and other confidential information.

The characters entered into a PasswordInput are masked, but the value of the input may still be retrieved via getValue: 

buttonClick: function() {
  var password = this.$.passwordInput.getValue();
}

RichText

RichText, which also extends enyo.Input, is a multi-line text input control that supports rich formatting, such as boldface, italics, and underlining. Note that rich formatting may be disabled by setting the richContent property to false.

Use the value property to get or set the displayed text. The onchange event fires when the control blurs.

Here's an example of a simple kind that implements a RichText: 

enyo.kind({
  name: "MyApps.Sample",
  kind: "enyo.VFlexBox",
  components: [
      {kind: "RowGroup", caption: "RichText Example", components: [
          {kind: "RichText", value:"To <b>boldly</b> go...",
              onchange: "richTextChange", components: [
                  {kind: "Button", caption: "Go", onclick: "buttonClick"}
              ]
          }
      ]}
  ],
  buttonClick: function(inSender, inEvent) {
      // handle click
  },
  richTextChange: function(inSender, inEvent) {
      // handle change
  }
});

RichText Example

Published Properties

Name Default Description
richContent true Set to false to disable rich formatting.
maxTextHeight null
selection null A DOM Selection object describing the selected text. It cannot be set. Instead, the selection may be altered by manipulating the object directly via the DOM Selection object API. For example: this.$.richText.getSelection().collapseToEnd();