Sue Stephen
08-01-2004, 11:08 PM
Hi,
I am developing a form that uses Shift+Click to achieve multiple selection of form elements. I use IE 6.0.
However, for example, after I click on "link1" and it is then selected, I "shift + click" "link3", the first three link names are selected, but the background of some part of the texts turn blue.
Does anyone know what causes this situation? Thank you for your help.
SS
JS code: testJS.js
--------------
var count = 0;
function selectFile(){
//alert(event.srcElement.name);
var shiftPressed = false;
var altPressed = false;
var ctrlPressed = false;
shiftPressed=event.shiftKey;
altPressed =event.altKey;
ctrlPressed =event.ctrlKey;
//alert(ctrlPressed == true?"ctrl Pressed");
var current = event.srcElement;
//User Shift + Click, everything is selected between last one to current one.
if (shiftPressed && count > 0)
{
//alert("shift pressed " + "last is " + last + "\n current " + current.name);
var start = document.forms[0].elements[current.name].value*1;
var end = last*1;
//alert(start);
<!-- Find the loop start and end -->
if (start > end)
{
var tmp = start;
start = end;
end = tmp;
}
for (var i = start; i <= end; i=i+1)
{
document.getElementById(parseInt(i)).style.background="pink";
var name=document.getElementById(parseInt(i)).name;
document.forms[0].elements[name].checked=true;
count++;
}
}
// User Ctrl + Click and when more than one selection are made
//Postcondition: only the one clicked is selected or deselected
else if (ctrlPressed && count > 0)
{
//alert("ctrl pressed " + count);
if (document.forms[0].elements[current.name].checked==true)
{
current.style.background="white";
document.form1.elements[current.name].checked=false;
count--;
}
else
{
current.style.background="pink";
document.form1.elements[current.name].checked=true;
count++;
}
}
// User clicks for the first time, check and highlight the element clicked
else if (count < 1)
{
//alert("count < 1 " + count);
if (document.forms[0].elements[current.name].checked==false)
{
current.style.background="pink";
document.form1.elements[current.name].checked=true;
}
count++;
}
last=current.id;
}
------------------------------------------------------
htm page:
-----------------------------------------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="testJS.js"></script>
</head>
<body>
<form name="form1" menthod="post">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td width="4%"><input name="link1" type="checkbox" value="1" unchecked></td> <td onclick="selectFile()" id = "1" name="link1">link1</td></tr>
<tr> <td><input name="link2" type="checkbox" value="2" unchecked></td> <td onclick="selectFile()" id = "2" name="link2" >link2</td> </tr>
<tr> <td><input name="link3" type="checkbox" value="3" unchecked></td><td onclick="selectFile()" id = "3" name="link3" >link3</td> </tr>
<tr> <td><input name="link4" type="checkbox" value="4" unchecked></td><td onclick="selectFile()" id = "4" name="link4" >link4</td> </tr>
<tr> <td><input name="link5" type="checkbox" value="5" unchecked></td><td onclick="selectFile()" id = "5" name="link5" >link5</td> </tr>
<tr> <td><input name="link6" type="checkbox" value="6" unchecked></td><td onclick="selectFile()" id = "6" name="link6" >link6</td> </tr>
<tr> <td><input name="link7" type="checkbox" value="7" unchecked></td><td onclick="selectFile()" id = "7" name="link7" >link7</td> </tr>
</tr>
</table>
</form>
</body>
</html>
I am developing a form that uses Shift+Click to achieve multiple selection of form elements. I use IE 6.0.
However, for example, after I click on "link1" and it is then selected, I "shift + click" "link3", the first three link names are selected, but the background of some part of the texts turn blue.
Does anyone know what causes this situation? Thank you for your help.
SS
JS code: testJS.js
--------------
var count = 0;
function selectFile(){
//alert(event.srcElement.name);
var shiftPressed = false;
var altPressed = false;
var ctrlPressed = false;
shiftPressed=event.shiftKey;
altPressed =event.altKey;
ctrlPressed =event.ctrlKey;
//alert(ctrlPressed == true?"ctrl Pressed");
var current = event.srcElement;
//User Shift + Click, everything is selected between last one to current one.
if (shiftPressed && count > 0)
{
//alert("shift pressed " + "last is " + last + "\n current " + current.name);
var start = document.forms[0].elements[current.name].value*1;
var end = last*1;
//alert(start);
<!-- Find the loop start and end -->
if (start > end)
{
var tmp = start;
start = end;
end = tmp;
}
for (var i = start; i <= end; i=i+1)
{
document.getElementById(parseInt(i)).style.background="pink";
var name=document.getElementById(parseInt(i)).name;
document.forms[0].elements[name].checked=true;
count++;
}
}
// User Ctrl + Click and when more than one selection are made
//Postcondition: only the one clicked is selected or deselected
else if (ctrlPressed && count > 0)
{
//alert("ctrl pressed " + count);
if (document.forms[0].elements[current.name].checked==true)
{
current.style.background="white";
document.form1.elements[current.name].checked=false;
count--;
}
else
{
current.style.background="pink";
document.form1.elements[current.name].checked=true;
count++;
}
}
// User clicks for the first time, check and highlight the element clicked
else if (count < 1)
{
//alert("count < 1 " + count);
if (document.forms[0].elements[current.name].checked==false)
{
current.style.background="pink";
document.form1.elements[current.name].checked=true;
}
count++;
}
last=current.id;
}
------------------------------------------------------
htm page:
-----------------------------------------------------
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="testJS.js"></script>
</head>
<body>
<form name="form1" menthod="post">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td width="4%"><input name="link1" type="checkbox" value="1" unchecked></td> <td onclick="selectFile()" id = "1" name="link1">link1</td></tr>
<tr> <td><input name="link2" type="checkbox" value="2" unchecked></td> <td onclick="selectFile()" id = "2" name="link2" >link2</td> </tr>
<tr> <td><input name="link3" type="checkbox" value="3" unchecked></td><td onclick="selectFile()" id = "3" name="link3" >link3</td> </tr>
<tr> <td><input name="link4" type="checkbox" value="4" unchecked></td><td onclick="selectFile()" id = "4" name="link4" >link4</td> </tr>
<tr> <td><input name="link5" type="checkbox" value="5" unchecked></td><td onclick="selectFile()" id = "5" name="link5" >link5</td> </tr>
<tr> <td><input name="link6" type="checkbox" value="6" unchecked></td><td onclick="selectFile()" id = "6" name="link6" >link6</td> </tr>
<tr> <td><input name="link7" type="checkbox" value="7" unchecked></td><td onclick="selectFile()" id = "7" name="link7" >link7</td> </tr>
</tr>
</table>
</form>
</body>
</html>