Monday, December 23, 2013

Text Object



The String object of JavaScript allows you to perform manipulations on a stored piece of text, such as extracting a substring, searching for the occurrence of a certain character within it etc.

 Events

Events
Description
onBlur
Code is executed when the focus is removed from the text field.
onChange
Code is executed when the user changes the value within the text field, and removes focus away from the field.
onFocus
Code is executed when the focus is set on the text field.
onKeyDown
Code is executed when user presses down the key within the text field.
onKeyPress
Code is executed when user presses the key within the text field.
onKeyUp
Code is executed when user releases a key within the text field.
onSelect
Code is executed when user selects some text within the text field.

Properties

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);
        }

Methods
Methods
Description
blur()
Removes focus away from the text field.

document.getElementById('txtUsername').blur();
focus()
Sets focus on the text field.

document.getElementById('txtUsername').focus();
select()
Highlights the content of the text field.

document.getElementById('txtUsername').select();