Properties
|
Description
|
form
|
References the form that contains the text field.
HTML:
<input
type="text" id="txtUsername" />
Javascript:
var username=formId.txtUsername.value;
|
accessKey
|
String value that sets/ returns the accessKey for
the field.
HTML:
<a
href="http://www.wikipedia.com" accesskey="w">Wikipedia</a><br>
<a
href="http://www.google.com" accesskey="g">Google</a>
Note: Use Alt + accessKey
(or Shift + Alt + accessKey) to access the element with the specified
access key.
Javascript
function myFunction() {
var a1Key = document.getElementById("a1").accessKey;
var a2Key =
document.getElementById("a2").accessKey;
alert(a1Key);
alert(a2Key);
document.getElementById("a1").accessKey
= "e";
document.getElementById("a2").accessKey
= "h";
}
|
name
|
Reflects the name of the text field (the name
attribute).
|
id
|
Reflects the id of the text field (the id
attribute).
|
type
|
A property available on all form elements,
"type" returns the type of the calling form element, in this case,
"text".
Note:
type='password' - Set the text mode to password.
type='hidden' - Set the hidden field.
Hidden Field:
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field
does not show on the page. Therefore the visitor can't type anything
into a hidden field, which leads to the purpose of the field.
|
disabled
|
Boolean value that sets/ returns whether the
field is disabled.
HTML
First Name:
<input type="text"
id="myText1" value="Billy"/>
<button
type="button" onclick="myFunction()">
Try it</button>
Javascript
function myFunction() {
var txtDisabled =
document.getElementById("myText1").disabled;
alert(txtDisabled);
document.getElementById("myText1").disabled
= true; //or “true”
}
|
value
|
Read/write string that specifies the value of the
text field.
HTML
First Name:
<input type="text"
id="myText1" value="Billy"/>
<button
type="button" onclick="myFunction()">
Try it</button>
Javascript
function myFunction() {
var textValue =
document.getElementById("myText1").value;
alert(textValue);
document.getElementById("myText1").
value = “Dylan”;
}
|
maxlength
|
The maxlength attribute specifies the maximum number of characters
allowed in the <input> element.
Please not ‘L’
should be capital letter in maxLength in Javascript.
HTML
First Name:
<input type="text"
id="myText1" value="Billy" maxlength="10"/>
<button
type="button" onclick="myFunction()">
Try it</button>
Javascript
function myFunction() {
var textMaxL =
document.getElementById("myText1").maxLength;
alert(textMaxL);
document.getElementById("myText1").maxLength
= 5;
}
|
dir
|
Ltr or rtl. The dir
attribute specifies the text direction of the element's content. HTML
First Name:
<input type="text"
id="myText1" value="Billy" dir="ltr"/>
<button
type="button" onclick="myFunction()">
Try it</button>
Javascript
function myFunction() {
var textDir =
document.getElementById("myText1").dir;
alert(textDir);
document.getElementById("myText1").dir
= "rtl";
}
|
readonly
|
The readonly attribute is a boolean attribute.
When present, it specifies that an
input field is read-only.
|
size
|
The size attribute specifies the visible width, in
characters, of an <input> element.
HTML
First Name:
<input type="text"
id="myText1" value="Billy" size="15"/>
<button
type="button" onclick="myFunction()">
Try it</button>
Javascript
function myFunction() {
var textSize =
document.getElementById("myText1").size;
alert(textSize);
document.getElementById("myText1").size
= 5;
}
|
tabindex
|
The tabindex attribute specifies the tab
order of an element (when the "tab" button is used for navigating).
HTML
First Name:
<input type="text"
id="myText1" value="Billy" tabindex="1" />
<input type="text"
id="myText2" value="Dylan" tabindex="2" />
<button
type="button" onclick="myFunction()">
Try it</button>
Javascript
function myFunction() {
var txtTI1 =
document.getElementById("myText1").tabIndex;
var txtTI2 = document.getElementById("myText2").tabIndex;
alert(txtTI1);
alert(txtTI2);
document.getElementById("myText1").tabIndex
= "2";
document.getElementById("myText2").tabIndex
= "1";
}
|
class
|
The class attribute specifies one or more
classnames for an element.
|
style
|
The style attribute specifies an inline
style for an element.
|
title
|
The
title attribute specifies extra information about an element.
The information is most often shown as a tool tip text when the
mouse moves over the element.
HTML
First Name:
<input type="text"
id="myText" value="Billy"
title="My Name"/>
<button
type="button" onclick="myFunction()">
Try it</button>
Javascript
function myFunction() {
var title =
document.getElementById("myText").title;
alert(title);
document.getElementById("myText").title
= "Title changed";
}
|
defaultValue
|
Sets or returns the default value of a text field.
HTML
First Name:
<input type="text"
id="myText" value="Billy" />
<button
type="button" onclick="myFunction()">
Try it</button>
Javascript
function myFunction() {
var x = document.getElementById("myText").defaultValue;
alert(x);
}
|
No comments:
Post a Comment