inputText Component

InputText

Based upon HTML5 input tag, there are a lot of variations that are available for components. Because of consistency across browsers and devices a subset of these variations is supported. This component is styled for each supported device with the <mobi:deviceStylesheet/> component and has <mobi:ajax /> support

Each device will popup the correct keyboard for the "type". Jsf validation and conversion is supported.

Usage

Straight text field

<mobi:inputText value="#{input.someText}"
    type="text"
    placeholder="#{input.placeholder}"
    title="basic text input"/>

Using single submit

<mobi:inputText value="#{input.someNumber}"
    type="text" singleSubmit="true"
    placeholder="#{input.placeholder}"
    title="number from popup number menu"/>

Using password/inputSecret

<mobi:inputText id="passwordInput" type="password"
     placeholder="Password input"
     value="#{input.password}">
    <f:validateLength minimum="6" maximum="8"/>
</mobi:inputText>

Using text area

<mobi:inputText value="#{input.textField}"
    type="textarea" placeholder="#{input.placeholder}"
    rows="3" cols="40" title="inputText field"/>

Attributes

Each type will have it's own set of attributes which will be passed through the renderer and applied to the browser to render using HTML5 markup encoding. Since the password and text example both are type='text" they will have the same list of attributes. The textarea has it's own set and their exists a common subset of attributes at this time. As more "types" are implemented, they will each have their own unique set of attributes and share these common ones. The jsf support comes in the ability to use jsf validation and conversion. ICEfaces then allows the ability to submit the field via ajax (singleSubmit) or the traditional (whole form) approach.

Common Attributes

type for now just "text", "number", "password" and "textarea" are supported as of this release. "text" is default.

placeholder rather than using tooltips, the placeholder will display directly in the input field allowing developers to give hints as to what the user can use as entries

singleSubmit if true, submits itself (element) and triggers a full page response using the ICEfaces dom-diff algorithm (in other words, only what has changed on the view page). If false, then the field is not submitted until the form is.

tabindex standard jsf support

maxlength maximum length to display the field

For type="text" only

autocomplete not implemented in html5 yet on most browsers so not that useful

pattern at this point, will actually see the pattern in display as placeholder in some browsers

For type="textarea" only

cols number of columns for textarea for initial render

rows number of rows for textarea

wrap wrap the text if get to end of textarea

Tag Documentation

inputText