ug10.htm

Chapter Ten
Controlling the Cursor on the Page

Controlling the Cursor on the Page

There will be times, especially when you are using forms, for example, when you want to control the action of the visitor's cursor positioning.

You can save a visitor effort by placing the active cursor in a particular form element, so that he or she doesn't have to "click" to position the cursor there.

document.form.element.focus();

and

document.form.element.select();

These are handy tools just to make it easier for the visitor to your pages when he/she is preparing to type in a form.

The .focus(); call gives focus to any form element that you wish to specify, whether it is a password, an option in a select listing, a text element or a text area. (You can also reference it without the form name and element name using the elements[x] array)

If you set focus as soon as the page is loaded, say on the first line of a form, the visitor does not have to "click" in that line to begin typing. The cursor will already be positioned there, flashing and waiting for input.

In cases where you are preprocessing form input before submitting it, the simple addition of the .select(); call will also highlight the offending area, making it easier for the user to retype the incorrect entry.

<HTML><HEAD>

<TITLE>Focusing a Form Element</TITLE>

</HEAD>

<BODY BGCOLOR="white"><CENTER>

<P><B>JavaScript using the <FONT

COLOR="blue">.focus()</FONT> call</B>

<P>This script simply puts the cursor into the

Name Field, so that the visitor may begin typing

upon first entry to the page.<P>

<FORM NAME="ug">

Name <INPUT TYPE="text" NAME="ly"

VALUE="" SIZE=30>

<BR>Address

<INPUT TYPE="text" NAME="two"

VALUE="" SIZE=30>

</FORM>

<SCRIPT LANGUAGE="JavaScript">

<!-- Hide from JS-Impaired Browsers

document.ug.ly.focus();

// End Hiding -->

</SCRIPT>

</BODY>

</HTML>

Click Here to see above script

Now for a script that employs both the .select(); and .focus(); calls:

<HTML><HEAD>

<TITLE>Focus, Select a Form

Element</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Hide from JS-Impaired Browsers

/* This is, at best, a perfunctory test of

email address entry validity. Is there

an "@" sign and sufficient letters

prefixing it, is there a .net, .gov, .org,

.com, .int or .edu in the suffix?

Alert user if not, and both select

and focus on the element */

function reDoIt(){

txt=document.ug.ly.value;

if (txt.indexOf("@")<3){

alert("I'm sorry. This email address"

+" seems wrong. Please check the"

+" prefix and '@' sign.");

document.ug.ly.focus();

document.ug.ly.select();

}

else{

if ((txt.indexOf(".com")<5)

&&(txt.indexOf(".org")<5)

&&(txt.indexOf(".gov")<5)

&&(txt.indexOf(".net")<5)

&&(txt.indexOf(".mil")<5)

&&(txt.indexOf(".int")<5)

&&(txt.indexOf(".edu")<5)){

alert("I'm sorry. This email address"

+" seems wrong. Please check the"

+" suffix for accuracy. (It should in"

+"clude a .com,.net,.org,.gov, ."

+"mil, .int or .edu)");

document.ug.ly.focus();

document.ug.ly.select();

}

else{

document.ug.ly.value="Entry Accepted!"

}

// End Hiding -->

</SCRIPT>

</HEAD>

<BODY><CENTER>

<P><B>JavaScript for Focusing and

Selecting a Form Element</B>

<P>

<FORM NAME="ug">

<TABLE BORDER=0 WIDTH=486>

<TR><TD>This script initially simply puts the

cursor into the email form element, so that the visitor

may begin typing upon first entry to page.

<P>However, if you type an email address with any

basic mistakes, it triggers an alert and then both

focuses on mistaken entry and highlights it.

<P><DIV ALIGN=CENTER>Email:

<INPUT TYPE="text" NAME="ly" VALUE=""

SIZE=30>

<BR><INPUT TYPE="button" NAME="but"

VALUE=" Submit " onClick="reDoIt()">

</DIV></TD></TR>

</TABLE>

</FORM>

<SCRIPT LANGUAGE="JavaScript">

<!-- Hide from JS-Impaired Browsers

document.ug.ly.focus();

// End Hiding -->

</SCRIPT>

</BODY>

</HTML>

Click Here to see above script.

document.form.element.blur();

When you are capturing data entry from various form elements, this call allows you to remove the focus from that form element.

The element may be any of the usual form elements: text, text area, select or password.

Caution: don't confuse this with the onBlur="some action" call.

document.ugly.txt.blur();

document.ugly.pwd.blur();

document.ugly.area.blur();

using this form:

</TEXTAREA>

</FORM>

document.form.element.click();

When you are capturing data entry from various form elements, this call allows you to simulate a "click" by the visitor on a given form element.

The element may be any of the usual form "clickable" elements: ie, a submit or reset button, a radio button or a check box.

Caution: don't confuse this with the onClick="some action" call.

document.ugly.btn.click();

document.ugly.rst.click();

document.ugly.rb [x].click();

document.ugly.ckb.click()

using this form:

</FORM>

window_name.clear();

This call empties the content of a screen window - the present screen, a pane of a frameset document or a new window which has been opened.

It does so regardless of how that content was created: by HTML or by JavaScript.

It is useful when you wish to redisplay some content on a given page without totally reloading that window, or, in some cases, preparatory to closing a new window you have opened.

parent.panename.document.clear();

document.clear;

newWindow.document.clear();

windowname.close();

This call closes a screen window - the present screen, a pane of a frameset document or a new window which has been opened.

If you call close(); without specifying a windowname, JavaScript will close the current window, because the compiler will think you meant to close the present document. This is bad -- embarrassing, because now the user has no browser on screen.

window.close();

self.close();

close();

When you open a new browser window, the call to close it is simply to use the name by which you defined it:

msg=window.open("");

/* Some actions sending stuff to screen

here. Then, when done with this

new window: */

msg.close();

document.open(variable);

This call prepares a destination for data you plan to send to it - generally using JavaScript.

It may be a new window you are opening, a different pane in an existing frameset, or even the document that is presently displayed in the active window of the browser.

variable is an optional insertion (for the mime type) in this call. If you leave the parentheses empty, it will assume that you plan to send HTML (mime type "text/html") to the destination specified.

Here are the mime types (kinds of data streams) that you may specify, if you wish:

"text/html" - an HTML document using ASCII text.

"text/plain" - a Non-HTML document using plain ASCII text with end-of-line characters to delimit displayed lines. This may be useful in lieu of an HTML document containing only content between <PRE></PRE> or <TT></TT> tags.

"image/gif" - a .gif image file. Caution, when I last tested this, I got a status line message of internal/external - reentrant mim.x and the call didn't work. Maybe my code was too ugly. I did specify a document with encoded bytes comprised of a GIF header and pixel data.

"image/jpeg" - a .jpg image file. Caution, when I last tested this, I got a status line message of internal/external - reentrant mim.x and the call didn't work. Maybe my code was too ugly. I did specify a document with encoded bytes comprised of a JPEG header and pixel data.

"image/x-bitmap" - a bitmap file. I was too discouraged with my failures using to two calls above to try a document with encoded bytes comprised of a bitmap header and pixel data, so dunno if it works or not.

"Plug-In_Name" - first fetches the named Plug-In and then uses it as the destination for the data. Thus, this is a two part call. For example, "x-world/vrml" loads the VR Scout VRML plug-in from Chaco Communications, and the plug-in name "application/x-director" loads the Macromedia Shockwave plug-in.

After you have finished sending the data by what ever means (and mime type) be sure to complete or fiinish the process (end the data stream) by using document.close().

With earlier browser versions, be sure to add a <BR> or <P> tag at the very end of HTML data sent to a destination to cause it to display.

You can use document.open(); and document.close(); multiple times in a given script for the same destination.

function newWin() {

str="Now is the time!";

msg.document.open();

msg.document.write(str);

msg.document.close();

}

In the following example, the function ckPlugIn() determines whether a user has the ShockWave plug-in installed:

function ckPlug(mimeType){

var tst=false;

a=window.open("","","WIDTH=1,HEIGHT=1");

if (a!=null){

if (a.document.open(mimeType)!=null){

tst=true;

}

a.close();

}

return havePlugIn;

}

var SW=ckPlug("application/x-director")

document.close();

This call simply stops the data being sent to a document. (It's like clicking the "Stop" button on your Browser)

It stops the "meteor shower" in the Netscape® icon in the upper right corner of the browser and displays "Document: Done" in the status bar.

function opn_n_cls(){

str="I'm writing to a new window!";

msg=window.open("","","");

msg.document.write(str);

msg.document.close();

}

Unfortunately, this is not a fool-proof call to be using. On intermittent occasions, this script will cause the browser to "crash" and display an error of type 1.

But the rascal is useful enough that you will be tempted to use it in your own window opening and closing scripts. It won't always crash. Just sometimes...

A somewhat ugly and kleugy alternative that I use is apparent when you click on any of the scripts in this book.

I simply use an alert() call to force the window which may be hidden behind the present browser window to the front.

special open(new browser window);

There are many cases where you may prefer to open a new (extra) browser window to display some content to the visitor without removing the present content from screen.

Although it uses the same document.open(); call we've just studied, the JavaScript code will require a number of additonal conditions to be specified.

You should give a name to this new browser window, of course. But you may also specify how big it should be, whether or not it should have a location line at the top, a status line at the bottom, whether or not directory buttons should be displayed, etc.

name=window.open(url,target,features);

name is the name you give the new window in your script, for operations within this script. Do not call name=open(); or you will be opening the present document, not a new window.

Important: the commas separating the three following items are necessary. Don't forget them!

url is an optional item which many times will simply be indicated by double quotes(""), at least if you are writing the content to the window from this JavaScript. If, on the other hand, you simply want a page loaded into that new browser window, you put the relative or full URL inside the quotes.

target is like the "NAME=" you use in frameset documents. Usually, again, you can leave this "blank" by simply using double quotes ("") But if you are working in frames, or maybe directing new content to this new browser window from other documents, you will need to give this a name to be used as a target.

features allows you to describe the window you want opened as follows:

width=x You may specify the width of the new browser window just as you do in image calls, using pixels. You should not specify a width of more than 600 pixels even if you have your own monitor set to 800, since lots of users don't have that capability. Also, it is good practice to make it enough smaller that the present browser window is not totally covered (and hence hidden) by the new window.

height=x You may specify the height of the new window just as you do in image calls, using pixels. Due to the offset of new windows downward, you probably should limit this to 420 pixels or so.

location=x You may enable a location line at the top of the new window if you wish, which makes it easier for the user to type a new destination URL for this new window. Two ways of doing this are acceptable. You may use location=yes or location=no, or you may use the binary numerics of location=1 (enabled) and location=0 (disabled)

status=x You may enable or disable display of a status line at the bottom of the new window. Two ways of doing this are acceptable. You may use status=yes or status=no, or you may use the binary numerics of status=1 (enabled) and status=0 (disabled)

scrollbars=x You may enable or disable scroll bars in the new window. Two ways of doing this are acceptable. You may use scrollbars=yes or scrollbars=no, or you may use the binary numerics of scrollbars=1 (enabled) and scrollbars=0 (disabled)

resizable=x You may enable or disable resizing of the new window. Two ways of doing this are acceptable. You may use resizable=yes or resizable=no, or you may use the binary numerics of resizable=1 (enabled) and resizable=0 (disabled)

toolbar=x You may enable or disable display of the toolbar at the top of the new window. Two ways of doing this are acceptable. You may use toolbar=yes or toolbar=no, or you may use the binary numerics of toolbar=1 (enabled) and toolbar=0 (disabled)

directories=x You may enable or disable display of the directories buttons at the top of the new window. Two ways of doing this are acceptable. You may use directories=yes or directories=no, or you may use the binary numerics of directories=1 (enabled) and directories=0 (disabled)

menubar=x You may enable or disable display of the menu bar at the top of the new window. Two ways of doing this are acceptable. You may use menubar=yes or menubar=no, or you may prefer to use the binary numerics of menubar=1 (enabled) and menubar=0 (disabled)

You may use any grouping of these features as you wish. If you do not specify any of them, they will all be set to yes (1). But if you specify even just one feature, all of the rest that you don't specify will be set to no (0)

If you call a feature without the equal sign and an x value, it will be set to yes.

"location,status"

will result in the same display as:

"location=yes,status=yes"

"location=1,status=1"

Do not put spaces between the items you call in the features section, but always separate them by commas.

<HTML><HEAD>

<TITLE>Opening New Browser Window for

Existing HTML Document</TITLE>

</HEAD>

<BODY BGCOLOR="white">

<CENTER>

<P><B>JavaScript to Open a New Browser

Window</B>

<P><FORM NAME="ug">

<TABLE BORDER=0 WIDTH=486>

<TR><TD>This script simply opens a new

browser window to display a document named

"apage.htm" with both a location and a status

line when the button below is clicked.<P>

NOTE: For this demo, since "apage.htm" does

not exist, the window will be opened with an

alert message that Netscape can't find the file.

<P><DIV ALIGN=CENTER>

<INPUT TYPE="button" NAME="b1"

VALUE=" Click to Open New Window "

onClick="window.open('apage.htm','','location,status')">

</DIV></TD></TR>

</TABLE>

</FORM>

</BODY>

</HTML>

Click Here to see above script.

And now a script to both open and write from JavaScript to a new window:

<HTML><HEAD>

<TITLE>Opening and Writing to New

Browser Window</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Hide from JS-Impaired Browsers

function opnIt(){

msg=window.open("","","location,status");

msg.document.clear();

/* Note that the word SCRIPT was not

kept intact on one line in the

write() below. A bug will parse

it and will not compile the script

correctly if you don't break that

word when it appears within write()

statements. */

msg.document.write('<HTML><HEAD><TI'

+'TLE>New Web Browser Window</TITLE>'

+'<SCR'

+'IPT LANGUAGE="JavaScript">\ralert("'

+'I am just bringing this window to t'

+'he front");\r</SCRI'

+'PT></HEAD><BODY BGCOLOR="lightblue"'

+'><CENTER><FONT SIZE=7>We Have Ope'

+'ned a New Window with a Light Blue Ba'

+'ckground, a Location Line and a Sta'

+'tus Line!</FONT></CENTER></BODY></H'

+'TML><P>');

}

// End Hiding -->

</SCRIPT>

</HEAD>

<BODY><CENTER>

<P><B>JavaScript to Open and Then Write to a

New Browser Window</B>

<P><FORM NAME="ug">

<TABLE BORDER=0 WIDTH=486>

<TR><TD>This script simply opens a new browser

window with both a location and a status line to

display a document that is "written on the fly" to

it by JavaScript when the button below is clicked.

<P>Note: since the user may not close this browser

window when finished, but simply click on the still

visible browser window behind it, an alert is used

to force the window to the front if it is still in

existence (behind the big browser) when the button is

clicked.

<P><DIV ALIGN=CENTER>

<INPUT TYPE="button" NAME="b1"

VALUE=" Click to Open New Window "

onClick="opnIt()">

</DIV></TD></TR>

</TABLE>

</FORM>

</BODY>

</HTML>

Click Here to see above script.