JavaScript DHTML/Form Control/Focus Tab
Содержание
Call blur method from text field
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function butCheckForm_onclick()
{
var myForm = document.form1;
myForm.txtAge.blur();
if (myForm.txtAge.value == "" || myForm.txtName.value == "")
{
document.write("missing value!");
if (myForm.txtName.value == "")
{
myForm.txtName.focus();
}
else
{
myForm.txtAge.focus();
}
}
else
{
document.write(myForm.txtName.value);
}
}
function txtAge_onblur()
{
var txtAge = document.form1.txtAge;
if (isNaN(txtAge.value) == true)
{
alert("Age must be a number.");
txtAge.focus();
txtAge.select();
}
}
function txtName_onchange()
{
window.status = "Hi " + document.form1.txtName.value;
document.write(document.form1.txtName.value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form1> Please enter the following details:
Name:<INPUT TYPE="text" NAME=txtName onchange="txtName_onchange()">
Age: <INPUT TYPE="text" NAME=txtAge onblur="txtAge_onblur()">
<INPUT TYPE="button" VALUE="Check Details" NAME=butCheckForm onclick="butCheckForm_onclick()">
</FORM>
</BODY>
</HTML>
Controlling the tab Index Property
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>tabIndex Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function invert() {
var form = document.lab
for (var i = 0, j = form.elements.length; i < form.elements.length;
i++, j--) {
form.elements[i].tabIndex = j
}
}
function skip2() {
document.lab.text2.tabIndex = -1
}
function resetTab() {
var form = document.lab
for (var i = 0; i < form.elements.length; i++) {
form.elements[i].tabIndex = 0
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>tabIndex Property Lab</H1>
<HR>
<FORM NAME="lab">
Text box no. 1: <INPUT TYPE="text" NAME="text1"><BR>
Text box no. 2: <INPUT TYPE="text" NAME="text2"><BR>
<INPUT TYPE="button" VALUE="A Button"><BR>
<INPUT TYPE="checkbox">And a checkbox
</FORM>
<HR>
<FORM NAME="control">
<INPUT TYPE="button" VALUE="Invert Tabbing Order" TABINDEX=-1 onClick="invert()"><BR>
<INPUT TYPE="button" VALUE="Skip Text box no. 2 (IE Only)" TABINDEX=-1
onClick="skip2()"><BR>
<INPUT TYPE="button" VALUE="Reset to Normal Order" TABINDEX=-1 onClick="resetTab()">
</FORM>
</BODY>
</HTML>
Focus lost event
<html>
<head>
<title>Required Field</title>
<script type="text/javascript">
window.onload=setupEvents;
function setupEvents(evnt) {
document.someForm.text2.onblur=checkRequired;
}
function checkRequired (evnt) {
evnt = evnt ? evnt : window.event;
var target = evnt.target ? evnt.target : evnt.srcElement;
var txtInput = target.value;
if (txtInput == null || txtInput == "") {
document.write("value is required in field");
}
}
</script>
</head>
<body>
<form name="someForm">
<input type="text" name="text1" /><br />
<input type="password" name="text2" /><br />
<input type="hidden" name="text3" value="hidden value" />
<textarea name="text4" cols=50 rows=10>The text area</textarea>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Focus Next Control
function focusNext(form, elemName, evt) {
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode :
((evt.which) ? evt.which : evt.keyCode);
if (charCode == 13) {
form.elements[elemName].focus();
return false;
}
return true;
}
onkeypress="return focusNext(this.form, "name2", event)"
Request focus for text field
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function butCheckForm_onclick()
{
var myForm = document.form1;
myForm.txtAge.blur();
if (myForm.txtAge.value == "" || myForm.txtName.value == "")
{
document.write("missing value!");
if (myForm.txtName.value == "")
{
myForm.txtName.focus();
}
else
{
myForm.txtAge.focus();
}
}
else
{
document.write(myForm.txtName.value);
}
}
function txtAge_onblur()
{
var txtAge = document.form1.txtAge;
if (isNaN(txtAge.value) == true)
{
alert("Age must be a number.");
txtAge.focus();
txtAge.select();
}
}
function txtName_onchange()
{
window.status = "Hi " + document.form1.txtName.value;
document.write(document.form1.txtName.value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form1> Please enter the following details:
Name:<INPUT TYPE="text" NAME=txtName onchange="txtName_onchange()">
Age: <INPUT TYPE="text" NAME=txtAge onblur="txtAge_onblur()">
<INPUT TYPE="button" VALUE="Check Details" NAME=butCheckForm onclick="butCheckForm_onclick()">
</FORM>
</BODY>
</HTML>