User Guide

Overview

The wijtextbox is used to decorate a standard HTML text box element, including Input objects of type 'text' or 'password,' and Textarea objects.

NOTE: Please check the version histories for an outline of new features, improvements, and changes to the Wijmo widgets.

Markup and Scripting

The markup used to create a wijtextbox widget resembles the following:

<input type="textbox" />

Or

<area rows=”3” columns=”20” />

The following script initializes the wijtextbox widget:

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
        });
    </script>

Place the script to initialize the textbox in the head section, and this code in the body of your page to produce the input and textarea textboxes below.

<h3>Input</h3>
<input id="textbox" type="text" />
<h3>TextArea</h3>
<textarea id="area" rows="5" cols="80"></textarea>

Input

TextArea

Quick Start

This quick start helps you to create a Web page, add the wijtextbox widget, and customize the appearance and behavior of the widget.

In Notepad, to create a new HTML page, add the following code and save the document with an .html extension.
```
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
```

To reference the latest dependencies from the CDN, see http://wijmo.com/downloads/#wijmo-cdn. Add them to your HTML page within the<head> tags. For example:

<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
 
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
 
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.css" rel="stylesheet" type="text/css" />
 
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.1.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.1.min.js" type="text/javascript"></script>

Within the <body> tags, add markup like the following.
```
	<h3>Text Input</h3>
	<input id="textbox" type="text" / >
	<h3>Password Input</h3>
	<input id="textbox" type="password" />
	<h3>Text Area</h3>
	<textarea id="area" rows="5" cols="50"></textarea>
```
This markup adds three textbox widgets to your page.
- The first <input> element creates the text input widget, with its id option set to 'textbox' and its type option set to 'text'. The text input accepts a single lineof text.
- The second <input> element creates the password widget, with its id option set to 'textbox' and its type option set to 'password'. The password input hidestext as it is entered.
- The <textarea> element creates the resizable text area widget, with its id option set to 'area' and its rows and cols options set to '5' and '50'. The rowsand cols options set the size of the area.
We call each of these types and IDs in the jQuery script to initialize the widget.

Within the <head> tags, below the references, add the following script to initialize the jQuery widget.

<script type="text/javascript">
$(document).ready(function() {
 $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
 var watermark = 'Collect user names, hide password input, and allow users to resize a multi-line text area.';
 $(":input[type='text'],:input[type='password'],textarea").blur(function(){
  if ($(this).val().length == 0)
    $(this).val(watermark).addClass('watermark');
 }).focus(function(){
  if ($(this).val() == watermark)
    $(this).val('').removeClass('watermark');
 }).val(watermark).addClass('watermark');
});
</script>

This script calls each of the three textbox widgets and adds a watermark, text that disappears when the user begins typing, to each.

Save your HTML file and open it in a browser. The wijtextbox widget appears like the following.

Text Input

Password Input

Text Area

API

Options

These are the options available when you use the Input object with the type specified as 'text' or 'password.'

disabled

Causes the textbox to appear in a disabled state. This state is marked by muted coloring and by no response to clicking.

Code Example:

<input id="textbox" type="text" disabled/>

maxLength

Sets the number of characters the user can enter in the textbox. Additional characters are ignored.

Code Example:

<input id="textbox" type="password" maxlength=7/>

readOnly

Allows the textbox to display text, but does not allow editing by the user.

Code Example:

<input id="textbox" type="text" readonly/>

size

Sets the width of the textbox in characters.

Default Value: 20

Code Example:

<input id="textbox" type="password" size=40/>

type

Set to "text" to display the textbox input widget, or to "password" to hide text input.

Code Example:

<label><input type="password" id="textbox"/>

Methods

destroy

Removes the functionality completely. This returns the element back to its pre-init state.

Code Example:

$(".selector").wijtextbox("destroy");

Textbox

Contents

User Guide

Overview

Markup and Scripting

Input

TextArea

Quick Start

Text Input

Password Input

Text Area

API

Options

disabled

maxLength

readOnly

size

type

Methods

destroy