WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Form Widgets

Widgets & Prefabs Library

  • Widgets Library
  • Widgets Composition

Cards

  • Overview
  • Creating a Card
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Data Table

  • Overview
  • Creating a Data Table
  • Data Source
  • Layouts
  • Styles
  • Configuration
  • Field Configuration
  • Summary Row
  • Row Expansion
  • Actions
  • Events & Methods
  • Use Cases

List

  • Overview
  • Creating a List
  • Data Source
  • Templates
  • Configuration
  • Behavior Settings
  • Properties, Events & Methods
  • Use Cases

Form

  • Forms Overview
  • Creating a Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Field Validations
  • Events & Methods

Live Form

  • Overview
  • Creating a Live Form
  • Data Source
  • Layouts
  • Configuration
  • Fields Configuration
  • Actions
  • Events & Methods
  • Use Cases

Form Widgets

  • Button
  • Button Group
  • Text
  • Number
  • Textarea
  • Select
  • Chips
  • Currency
  • Radioset
  • Checkbox
  • CheckboxSet
  • Toggle
  • Switch
  • Date,  Time and  Datetime
  • Calendar
  • FileUpload
  • Color Picker
  • Slider
  • Rating Widget
  • Select Locale

Live Filter

  • Overview
  • Creating a Live Filter
  • Data Source
  • Layouts
  • Configuration
  • Field Configuration
  • Actions
  • Events & Methods
  • Use Cases

Container

  • Grid Layout
  • Accordion
  • Container
  • Panel
  • Tabs
  • Tile
  • Wizard

Basic Widgets

  • Label
  • Anchor
  • Icon
  • Picture
  • Tree
  • Video
  • Audio
  • HTML
  • Iframe
  • Message
  • Spinner
  • Search
  • Search - Basic Usage
  • Richtext Editor
  • Progress Bar
  • Progress Circle

Charts

  • Chart Widgets
  • Callback Event

Navigation

    Nav

    • Nav Overview
    • Creating navigation

    Nav Bar

    • Nav Bar Overview

    Breadcrumb

    • Breadcrumb Overview
    • Creating a Breadcrumb

    Dropdown Menu

    • Dropdown Menu
    • Creating a Dropdown Menu

    Popover

    • Popover Overview
    • Creating a Popover

Advanced Widgets

  • Login
  • Marquee
  • Carousel

Dialog Widgets

  • Modal Windows/ Dialogs
  • Design Dialog
  • Alert Dialog
  • Confirm Dialog
  • IFrame Dialog
  • Page Dialog
  • Login Dialog

Mobile & Device Widgets

  • Camera
  • Media List
  • Segmented Control
  • Barcode Scanner

Prefabs

  • Prefabs Overview
  • Create Prefab
  • Prefab with Partials
  • Use Cases - Prefabs
  • Prefabs Directory

    • Youtube
    • Googlemaps
    • QRCode
    • Barcode Scanner Prefab
    • Box Viewer Prefab
    • Entity Extraction Prefab
    • Docusign Prefab

    OAuth

    • OAuth Prefabs
    • Box
    • Facebook
    • Google
    • Instagram
    • LinkedIn
Edit

Textarea


Textarea widget represents a multi-line plain-text editing control. It can be used in a web application for adding comments and feedback forms as a plain text editor.

Properties

PropertyDescription
NameThe name is a unique identifier for textarea widget.
PlaceholderA placeholder is text to show in the editor when there is no value. A common use of this is a search box that says in faint gray italicized text "Search..." which disappears as soon as the user starts to edit the text box. This is a useful alternative to a caption if you are constrained in space and asking for something simple of the user.
Accessibility
HintAny text or an HTML you enter for this property will be shown as a tooltip if the mouse hovers over this widget for 1.5 seconds.
Tab indexThe tab index attribute specifies the tab order of an element. You can use this property to change the default tabbing order for widget access using the tab key. The value can range from 0 to 32767. The default is 0 and -1 makes the element non-focusable.

NOTE: In Safari browsers, by default, Tab highlights only text fields. To enable Tab functionality, in Safari Browser from Preferences -> Advanced -> Accessibility set the option "Press Tab to highlight each item on a webpage".
Shortcut keyThe shortcut key property specifies a shortcut key to activate/focus an element. (*See below for details)
Layout
WidthThe width of your widget can be specified in px or % (i.e 50px, 75%).
HeightThe height of your widget can be specified in px or % (i.e 50px, 75%).
Default Value
ValueThis is the default value to display value for an editor widget. Note that the display value is just what the user sees initially, and is not always the dataValue returned by the widget.
Validation
RequiredA required editor in wm.LiveForm may refuse to save without a required field.
Maximum charactersDefines the maximum number of characters that can be entered in the editor.
Help text (character count)Display the number of characters entered or left to enter by comparing it with the value you have set in the Maximum characters in the text area.

There are three default ways to display the help text property in runtime, including:
1. 0 characters filled out of 100
2. 100 characters left out of 100
3. 0/100

If you want to show this property other than the default values, you can use the bind expression button and change the value of this help text property. You can also provide the charlength and maxchars properties for binding in the Use Expression dialog.

NOTE: This property will only show when you set the Maximum characters property.
Behavior
Auto FocusThis property makes the element get focused automatically when the page loads.
Read OnlySelecting this checkbox property prevents the user from being able to change the data value of a widget.
ShowShowing determines whether or not a component is visible. It is a bindable property.
Load on Demand (visible only when show property is bound to a variable)When this property is set and show property is bound, the initialization of the widget will be deferred till the widget becomes visible. This behavior improves the load time. Use this feature with caution, as it has a downside (as we will not be able to interact with the widget through script until the widget is initialized). When show property is not bound the widget will be initialized immediately.
DisabledIf the disabled property is true (checked) the value of the editor cannot change. The widget becomes display-only.
Update value onIf the selected value is blur: data value will be updated on blur event, default: data value will be updated on key up.
Update delayThe amount of delay in milliseconds to update the data value.

Events

EventDescription
ChangeThis event handler is called each time your element's value changes.
On focusThis event handler is called each time your element is focused.
On blurThis event handler is called each time your focus leaves your element.
Mouse Events
On clickThis event handler is called whenever the click event is triggered on a widget.
On mouse enterThis event handler is called whenever the mouse enters the widget.
On mouse leaveThis event handler is called whenever the mouse leaves the widget.
Touch Events
On tapThis event handler is called whenever the tap event is triggered on a widget.
Keyboard Events
Key DownThis event handler is called whenever a key is pressed down.
Key PressThis event handler is called whenever a key is pressed.
Key UpThis event handler is called whenever a key is released.

Shortcut key: The shortcut key property specifies a shortcut key to click the button. The way of accessing the shortcut key is varying in different browsers:

BrowserShortcut key Trigger
Internet Explorer[Alt] + shortcut key
Chrome[Alt] + shortcut key (Windows/Linux)
[Control] [Alt] + shortcut key (MAC)
Firefox[Alt] [Shift] + shortcut key (Windows/Linux)
[Control] [Alt] + shortcut key (MAC)
Last updated on 4/11/2022 by Swetha Kundaram
← NumberSelect →
  • Properties
  • Events
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2022 WaveMaker, Inc. All rights reserved.