Hyperview

Hyperview

  • Guides
  • Examples
  • Reference
  • Blog

›Input Elements

Reference

  • Index

Behaviors

  • Behavior Attributes
  • <behavior>
  • Alert

Display Elements

  • <doc>
  • <screen>
  • <header>
  • <body>
  • <view>
  • <text>
  • <image>
  • <list>
  • <section-list>
  • <section>
  • <section-title>
  • <item>
  • <spinner>

Input Elements

  • <form>
  • <text-field>
  • <text-area>
  • <select-single>
  • <select-multiple>
  • <option>

Style Elements

  • <styles>
  • <style>
  • <modifier>

Hyperview Client

  • Hyperview component
  • Custom elements
  • Custom behaviors

<text-field>

The <text-field> element represents a single-line input field. When pressed, the field focuses and a keyboard appears to accept user input. The value entered into the <text-field> get serialized as form data when a <form> gets submitted.

<form>
  <text-field
    name="name"
    placeholder="Your name"
    value="Bart"
  />
  <text-field
    name="phone"
    placeholder="Your phone number"
    mask="(999) 999-9999"
    keyboard-type="phone-pad"
  />
</form>

Structure

A <text-field> element can appear anywhere within a <form> element.

Attributes

  • name
  • value
  • placeholder
  • keyboard-type
  • mask
  • style
  • id
  • hide

name

TypeRequired
stringYes

The name of the field within a <form> element. This name will be used when serializing a form to form data that gets sent in a server request.

value

TypeRequired
stringNo (defaults to blank)

The value of the field. This string gets rendered into the string and can be edited by the user. Set this value in the XML to pre-populate the text field.

placeholder

TypeRequired
stringNo

A label that appears within the text field. The placeholder only appears when the field is empty.

keyboard-type

TypeRequired
stringNo (defaults to default)

Sets the type of keybaord to show when the user focuses the input. Supported options:

  • default: Standard alpha-numeric keyboard
  • number-pad: Keyboard restricted to 0-9 digits plus decimals
  • decimal-pad: Keyboard restricted to 0-9 digits with no decimals
  • phone-pad: Keyboard restricted to digits and symbols that appear in phone numbers
  • email-address: Keyboard adapted for easier email address input (handy @ symbol)

mask

TypeRequired
stringNo

A mask string that formats the user's input. If specificed, on every keystroke the input will be formatted using the mask, which may add characters to the field or prevent the pressed key from being set. Mask format:

  • 9: Accept numbers
  • A: Accept alpha
  • S: Accept alphanumerics
  • *: Accept all

All other characters will automatically appear in the mask when the format is satisfied. For example:

<text-field name="phone" mask="(999) 999-9999" />

If the user types a 4, the field will show (4. If the user tries to type the letter A, the field will still show (4.

style

TypeRequired
stringNo

A space-separated list of styles to apply to the element. See Styles. Note that text style rules cannot be applied to an <text-field>.

<text-field> supports the focused style modifier. See Modifiers for more details.

id

TypeRequired
stringNo

A global attribute uniquely identifying the element in the whole document.

hide

TypeRequired
false (default), trueNo

If hide="true", the element will not be rendered on screen. If the element or any of the element's children have a behavior that triggers on "load" or "visible", those behaviors will not trigger while the element is hidden.

← <form><text-area> →
  • Structure
  • Attributes
Hyperview
Docs
ExamplesHyperview Reference
More
BlogGitHubStar
Copyright © 2019 Instawork