<inputtext>

The basic input-text element.

JavaScript: LzInputText

Extends Text

This tag creates an area of the canvas that the user can use to edit text. It is equivalent to the HTML <input type="text">, <input type="password">, and textarea tags.

See the documentation for the <text> tag for a description of the width and height attributes, and of scrolling.

Single-line input text

With the multiline and password attributes set to false (the default), this tag is similar to the HTML <input type="text"> tag. In this use, long lines of text are clipped according to the width attribute.

Example 1. Simple inputtext
<canvas height="20">
  <inputtext width="150">This text is editable.</inputtext>
</canvas>

Multi-line input text

With the multiline attribute set to true, this tag is similar to the HTML <textarea> tag. In this use, text is wrapped to the length of the width attribute, and the user can press Enter to create multiple lines of input.

Example 2. Simple inputtext
<canvas height="20">
  <inputtext width="150" multiline="true">This text is editable.</inputtext>
</canvas>

Passwords

With password set to true, this tag is similar to the HTML <input type="password"> tag. Input characters are displayed as the asterisk ('*') character.

Example 3. Password inputtext
<canvas height="20">
  <inputtext width="100" password="true">password.</inputtext>
</canvas>

Optimizing inputtext

A large <inputtext> view will respond to character input slowly. In many cases, it will not be able to keep up with reasonable typing speed, even on a fast machine.

If an instance of <inputtext> will not be resized at runtime, and the compiler can determine its size at compile time, the compiler can substitute a <inputtext> view that is optimized to accept text at that size for the generic resizable <inputtext> view. This optimized <inputtext> view can keep up with typing speed even at large sizes or on a slow computer.

A program can request an optimized <inputtext> by setting the resizable attribute to false, and supplying recognizable width and height dimension attributes. A recognizable dimension attribute is an attribute that is defined as a numeric literal, such as width="100", or that is defined as a simple $once expression that adds or subtracts a numeric literal to the width or height attribute of the view's parent, its parent's parent, or so on. This final optimization allows the optimization to apply to <inputtext> tags within a class definition, as in the second example below.

Example 4. Optimized inputtext
<canvas height="20">
  <inputtext resizable="false" width="150" height="20">
    This text is editable.
  </inputtext>
</canvas>
Example 5. Component with optimized inputtext
<canvas height="20">
  <class name="mytext" width="150" height="20" bgcolor="gray">
    <attribute name="text" type="text"/>
    <inputtext resizable="false" text="${parent.text}" bgcolor="white"
      x="1" y="1"
      width="$once{parent.width-2}" height="$once{parent.height-2}"/>
  </class>
  <mytext>This text is editable.</mytext>
</canvas>

The compiler can also infer the values of the width and height attributes if they are not supplied. If supplied, the value of the font must be a constant string in order for the text field to be optimized. If supplied, the value of the fontsize must be a constant in order to for the text field to be optimized. Generally these can be omitted and the inputtext will inherit the parent's font size and style by default.

Attributes
Name Usage Type (Tag) Type (JS) Default Category
password Tag & JS boolean Boolean false setter
 

If true, the input text field acts like a password input field; any text typed in appears as "****" characters in the current font.


resizable Tag & JS boolean Boolean   setter


Attributes inherited from Node

class, classroot, cloneManager, datapath, id, ignoreAttribute, ignoreplacement, immediateparent, initstage, name, nodeLevel, onconstruct, oninit, parent, placement, subnodes

Attributes inherited from Text

embedfonts, label, maxlength, multiline, pattern, resize, selectable, text

Attributes inherited from View

aaactive, aadescription, aaname, aasilent, aatabindex, align, bgcolor, clickable, clickregion, clip, cursor, defaultplacement, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hassetheight, hassetwidth, height, layout, loadratio, mask, onblur, onclick, ondata, ondblclick, onfocus, onkeydown, onkeyup, onmousedown, onmouseout, onmouseover, onmouseup, onselect, opacity, options, pixellock, play, resource, resourceheight, resourcewidth, rotation, selectiontype, showhandcursor, source, stretches, subviews, totalframes, unstretchedheight, unstretchedwidth, valign, visible, width, x, xoffset, y, yoffset


Methods

setEnabled()
LzInputText.setEnabled(enabled)

Sets whether user can modify input text field

Parameters
Name Type Desc
enabled Boolean true if the text field can be edited


setHTML()
LzInputText.setHTML(htmlp)

Set the html flag on this text view

Parameters
Name Type Desc
htmlp None


setText()
LzInputText.setText(t)

setText sets the text of the field to display

Parameters
Name Type Desc
t String the string to which to set the text


updateData()
LzInputText.updateData()

Retrieves the contents of the text field for use by a datapath. See LzDatapath.updateData for more on this.



Methods inherited from LzNode

animate, applyConstraint, applyData, childOf, completeInstantiation, createChildren, dataBindAttribute, destroy, determinePlacement, getAttribute, getOption, getUID, lookupSourceLocator, searchImmediateSubnodes, searchSubnodes, setAttribute, setDatapath, setID, setName, setOption

Methods inherited from LzText

addText, clearText, escapeText, getSelectionPosition, getSelectionSize, getText, getTextHeight, getTextWidth, setColor, setHScroll, setMultiline, setResize, setScroll, setSelectable, setSelection, setText, setXScroll, setYScroll

Methods inherited from LzView

addProxyPolicy, addSubview, bringToFront, construct, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getContextMenu, getCurrentTime, getDepthList, getHeight, getID3, getMouse, getPan, getTotalTime, getVolume, getWidth, init, measureHeight, measureWidth, play, releaseLayouts, removeProxyPolicy, searchParents, searchSubviews, seek, sendBehind, sendInFrontOf, sendToBack, setAAActive, setAADescription, setAAName, setAASilent, setAATabIndex, setAlign, setAttributeRelative, setBGColor, setClickable, setColorTransform, setContextMenu, setCursor, setHeight, setLayout, setOpacity, setPan, setPlay, setResource, setResourceNumber, setRotation, setShowHandCursor, setSource, setValign, setVisible, setVolume, setWidth, setX, setY, shouldYieldFocus, stop, stretchResource, unload, updateResourceSize


Events
Name Description
ontext None

Events inherited from LzNode

onconstruct, ondata, oninit

Events inherited from LzText

ontext

Events inherited from LzView

onaddsubresource, onaddsubview, onblur, onclick, ondblclick, onerror, onfocus, onframe, onheight, onlastframe, onload, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmouseup, onmouseupoutside, onopacity, onplay, onremovesubview, onstop, ontimeout, onwidth, onx, ony