Java Reference
In-Depth Information
The Submit and Reset buttons have corresponding objects called
Submit
and
Reset
, which have
exactly the same properties, methods, and events as a standard
Button
object.
text elements
The standard text elements enable users to enter a single line of text. This information can then be
used in JavaScript code or submitted to a server for server‐side processing.
The Text Box
A text box is created by means of the
<input/>
element, much as the button is, but with the
type
attribute set to
text
. Again, you can choose not to include the
value
attribute, but if you do, this
value will appear inside the text box when the page is loaded.
In the following example the
<input/>
element has two additional attributes,
size
and
maxlength
.
The
size
attribute determines how many characters wide the text box is, and
maxlength
determines the maximum number of characters the user can enter in the box. Both attributes are
optional and use defaults determined by the browser.
For example, to create a text box 10 characters wide, with a maximum character length of 15, and
initially containing the words
Hello World
, your
<input/>
element would be as follows:
<input type="text" name="myTextBox" size="10" maxlength="15" value="Hello World" />
The object that this element creates has a
value
property, which you can use in your scripts to set
or read the text contained inside the text box. In addition to the common properties and methods
discussed earlier, the object representing the text box also has the
select()
method, which selects
or highlights all the text inside the text box. This may be used if the user has entered an invalid
value, and you can set the
focus
to the text box and select the text inside it. This then puts the
user's cursor in the right place to correct the data and makes it very clear to the user where the
invalid data is. The
value
property always returns a string data type, even if number characters are
being entered. If you use the value as a number, JavaScript normally does a conversion from a string
data type to a number data type for you, but this is not always the case. For example, JavaScript
won't do the conversion if the operation you're performing is valid for a string. If you have a form
with two text boxes and you add the values returned from these, JavaScript concatenates rather than
adds the two values, so
1
plus
1
will be
11
and not
2
. To fix this, you need to convert all the values
involved to a numerical data type, for example by using
parseInt()
or
parseFloat()
or
Number()
.
However, if you subtract the two values, an operation only valid for numbers, JavaScript says “Aha,
this can only be done with numbers, so I'll convert the values to a number data type.” Therefore,
1
minus
1
will be returned as
0
without your having to use
parseInt()
or
parseFloat()
. This is a
tricky bug to spot, so it's best to get into the habit of converting explicitly to avoid problems later.
In addition to the common events, such as
focus
and
blur
, the text box has the
change
,
select
,
keydown
,
keypress
, and
keyup
events.
The
select
event fires when the user selects some text in the text box.
More useful is the
change
event, which fires when the element loses focus if (and only if) the value
inside the text box is different from the value it had when it got the focus. This enables you to do
things like validity checks that occur only if something has changed.
