focus() & High-light [Archive]

Jerome

10-30-2002, 03:33 PM

Hi,

mentioned below You see an undressed version of my site which I like very much to be fine-tuned.

Discription:

A form with two text input-possibilities
A script to check the input and set the focus after loading the page
A script to high-light the border of the input-field when the input is active

Questions:

1.Start the page gives no focus in field 1?
2.Start the page and go directly without filling in field 1 to field 2 (set the focus in field 2), push <enter> and You will get an alert and the focus goes back to field 1, however the border highlight goes to the submit button!

<HTML>
<HEAD>

<STYLE>
.invoer{border:2px solid #000000;}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">

//script to -highlight- the border of an input field
var around="red";
var ns6=document.getElementById&&!document.all;
var previous='';
var eventobj;
var intended=/INPUT/;
function checkel(which)
{
if(which.style&&intended.test(which.tagName))
{
if(ns6&&eventobj.nodeType==3)eventobj=eventobj.parentNode.parentNode;return true;
}
else return false
}
function highlight(e)
{
eventobj=ns6? e.target:event.srcElement
if(previous!='')
{
if(checkel(previous))
previous.style.borderColor=''
previous=eventobj
if(checkel(eventobj))
eventobj.style.borderColor=around
}
else
{
if(checkel(eventobj))
eventobj.style.borderColor=around
previous=eventobj
}
}

//script to check the input fields
function Validform(cust)
{
num0=/[a-zA-Z]{4,}/;
if(!num0.test(cust.X1.value))
{
window.alert("something 1.");
cust.X1.focus();
return false;
}
num1=/[a-zA-Z]{6,}/;
if(!num1.test(cust.X2.value))
{
window.alert("something 2.");
cust.X2.focus();
return false;
}
else
{

}
function startfocus()
{
if("document"==typeof(cust))
{
cust.X1.focus();
}
}
window.onload=startfocus();
}

</SCRIPT>

</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
//Script to write the layout of the document
document.write('<FORM NAME="mail" onKeyUp="highlight(event)" onClick="highlight(event)" onSubmit="return Validform(this);" ENCTYPE="text/plain" METHOD="post" ACTION="mailto:somebody@hotmail.com?SUBJECT=test">'+
'<INPUT TYPE="text" SIZE=60 MAXLENGTH="40" NAME="X1" CLASS="invoer" TABINDEX="1"></INPUT>'+
'<INPUT TYPE="text" SIZE=60 MAXLENGTH="40" NAME="X2" CLASS="invoer" TABINDEX="2"></INPUT><BR>'+
'<INPUT TYPE="submit" VALUE="SEND" CLASS="button"></INPUT></FORM>');

</SCRIPT>

</BODY>
</HTML>

Thanks in advance,
Jerome

Roy Sinclair

10-30-2002, 09:22 PM

1.Start the page gives no focus in field 1?

Your onload function is checking for and object named cust, you don't have an object named cust, change the name to document.forms.mail since looking for an object named mail alone would only work in IE anyway.

2.Start the page and go directly without filling in field 1 to field 2 (set the focus in field 2), push <enter> and You will get an alert and the focus goes back to field 1, however the border highlight goes to the submit button!

That's exactly how you coded it. Your functions are keyed at the form level so they work for every field in the form which includes the submit button. It's also set up to move the highlight only when something is keyed so your highlight doesn't move to field 1 until something is keyed into that field. You should probably be using the onfocus event for the fields instead.