PROWAREtech
JavaScript: Tutorial - A Guide to JavaScript - Page 18
User Interface Events
User interface events are those events that are not related to user actions.
-
onloadis fired on a window when the page has been completely loaded, on a frameset when all frames have been completely loaded, on an<img>element when it has been completely loaded, or on an<object>element when it has been completely loaded. -
onunloadis fired on a window when the page has been completely unloaded, on a frameset when all frames have been completely unloaded, or on an<object>element when it has been completely unloaded. -
onerroris fired on a window when a JavaScript error occurs, on an<img>element if the image specified cannot be loaded, on an<object>element if it cannot be loaded, or on a frameset if one or more frames cannot be loaded. -
onselectis fired when the user selects one or more characters in a<input type="text">or<textarea> onresizeis fired on a window or frame when it is resized.-
onscrollis fired on any element with a scrollbar when the user scrolls it. The<body>element contains the scrollbar for a loaded page.
The contextmenu Event
A context menu is the one that pops up when someone right clicks an object. The event is oncontextmenu.
Scripting with Forms
Originally, JavaScript was used for processing forms client-side thereby freeing up server resources.
Form Basics
Web forms are HTML <form> elements. The <form> element has
all of the same default properties as other HTML elements plus some special extra ones. These are:
-
acceptCharset: The character sets that the server can process. It is equivalent to the HTMLaccept-charsetattribute. action: This is the URI to send the request to. It is equivalent to the HTMLactionattribute.elements: This is a collection of all controls in the form.enctype: This is the encoding type of the request. It is equivalent to the HTMLenctypeattribute.length: This is the number of controls in the<form>.-
method: This is he type of HTTP request to send typically GET or POST. It is equivalent to the HTMLmethodattribute. name: This is the name of the form. It is equivalent to the HTMLnameattribute.reset(): This method resets all form fields to their default values.submit(): This method submits the form.-
target: The name of the window to use for sending the request and receiving the response. It is equivalent to the HTMLtargetattribute.
All forms on the page can be found in the document.forms collection. Each form can be
accessed in this collection by numeric index or by name attribute. Example:
var firstForm = document.forms[0];
var form1 = document.forms["form1"]Fields of the Form
The form elements can be accessed through the elements property of a form object
(<form>). Elements include <input>, <textarea>,
<button>, <select> and <fieldset>. Consider the
following:
var form = document.getElementById("someForm");
var field = form.elements[0];
//change the value
field.value = "Another value";
//check the value of form
alert(field.form === form); //true
//set focus to the field
field.focus();
//disable the field
field.disabled = true;
Every form field has a focus() and blur() methods. focus() is used to
set the focus on a certain field. To remove focus from a field invoke blur().
Selecting Text in Text Boxes
To select all the text in a <input type="text"> or <textarea> element,
invoke the select() method.
When text is selected by the user, a onselect event is fired.
To get the selected text use the selectionStart and selectionEnd
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}Use the setSelectionRange() method to set the selected text programmatically.
textbox.value = "just a test!"
//select all the text
textbox.setSelectionRange(0, textbox.value.length);Dealing with the Clipboard
See How to Copy to Clipboard article.
These six events are related to the clipboard:
onbeforecopy: Fires just before the copy operation takes place.oncopy: Fires when the copy operation takes place.onbeforecut: Fires just before the cut operation takes place.oncut: Fires when the cut operation takes place.onbeforepaste: Fires just before the paste operation takes place.onpaste: Fires when the paste operation takes place.
