...

View Full Version : Help with onblur not working



bvaroni
05-11-2008, 03:24 AM
Hi, im really noob at this and i really need your help. I got this odd text boxes to work as expected, but this onblur event only seems to work after i change the dropdown selection for the first time, after that everything works fine.
Please try running this HTML:


<html>
<head>
<style type="text/css">
body {font-family: verdana;font-weight:bolder;font-size:8pt;background-color: white; color: #3366CC; background-image:url(imgs/trl.gif); background-position: 62% 55px; background-repeat:no-repeat;}
input {border: 1px solid #999999;font-size: 12px;}
.i1 {width: 320px;min-height: 20px;padding-top: 3px; padding-left: 5px;font-size: 11px; z-index:0;}
.i2 {width: 140px;min-height: 19px;font-size: 9px; z-index:1;}
.b {font-weight:bolder;}
.e1 {position:relative;top:-63px;left:0px;z-index:10;font-size:24pt; color:#FF0000; display:none;-moz-user-select: none;-khtml-user-select: none;user-select: none; border:hidden;}
.x2 {font-size: 9px;}
.ly1 {display: block;}
.ly2 {display: none;}
.htable {position:relative;top:0px;right:0px;z-index:1;}
</style>

<script lng = "JavaScript" type="text/javascript">
function showOrHide(value) {
if (value==0) {
document.getElementById('l1').style.display='none';
document.getElementById('l2').style.display='block';
document.getElementById('l5').style.display='inline';
document.getElementById("sln").focus();
}
else if ((value==1) && (document.getElementById('sln').value=="")) {
document.getElementById('l1').style.display='block';
document.getElementById('l2').style.display='none';
document.getElementById('l5').style.display='none';
}
else if (value==2) {
document.getElementById('l5').style.top='-70px';
document.getElementById('l3').style.display='none';
document.getElementById('l4').style.display='block';
document.getElementById("lng").focus();
}
else if (value==3) {
document.getElementById("l3").innerHTML = ('em '+ SLN);
document.getElementById('l5').style.top='-63px'
document.getElementById('l3').style.display='block';
document.getElementById('l4').style.display='none';
}
return false;
}

function kct1(event){
if(document.getElementById('qs').value!=='')
{
showOrHide(0);
}
return;
}
function kct2(event){
showOrHide(2);
document.getElementById("lng").focus();
return;
}
</script>

</head>
<BODY marginheight='150px' onload="document.getElementById('qs').focus(); vclear();" style="overflow: hidden;">
<form onsubmit="return checkform(this);">


</td><td width="15%"></td></tr></tbody></table>
<center>
<table border="0" width="25%"><tbody>
<tr><td>Pesquisar</td></tr>
<tr><td><input class="i1" maxlength="2048" id="qs" onkeydown="if(event.keyCode==9){kct1();return false}"/></td></tr>

<tr><td class="x2">
<div class="ly1" id="l1" onmousedown="showOrHide(0);" style="max-width:100px">Excluir da Pesquisa</div>
<div class="ly2" id="l2"><input class="i1" style="color:#FF0000" id='sln' maxlength="2048" onblur="showOrHide(1)" onkeydown="if(event.keyCode==9){kct2();return false}"/></div></td></tr>

<tr><td class="x2"><div class="ly1" id="l3" onmousedown="showOrHide(2);" style="max-width:110px">em português (Brasil)</div>

<div class="ly2" id="l4" onBlur="showOrHide(3);"><select class="i2" id="lng" onChange="SLN=[this.options[this.selectedIndex].text];showOrHide(3);"><option label="africâner" value="af">africâner</option><option value="sq">albanês</option><option value="de" class="b">alemão</option><option value="am">amárico</option><option value="ar">árabe</option><option value="hy">armênio</select></div></td></tr>
<tr><td><div class="e1" id="l5">-</div></td></tr>

</tbody></table></form>

</center>
</body>
</html>
I need help to fix it so if a user clicks there but dont want to change the dropdown selection it'll disappear back again. I tried alot of things without sucess.

Also any tips to improve the code will be very appreciated.

Thanks in advance.
- bvaroni

chump2877
05-11-2008, 05:24 AM
The code is a mess and badly written. So much so that I won't even waste my time trying to address that. But I think I fixed your problem (it works in Opera). The change was simple, and the code is highlighted in red.


<html>
<head>
<style type="text/css">
body {font-family: verdana;font-weight:bolder;font-size:8pt;background-color: white; color: #3366CC; background-image:url(imgs/trl.gif); background-position: 62% 55px; background-repeat:no-repeat;}
input {border: 1px solid #999999;font-size: 12px;}
.i1 {width: 320px;min-height: 20px;padding-top: 3px; padding-left: 5px;font-size: 11px; z-index:0;}
.i2 {width: 140px;min-height: 19px;font-size: 9px; z-index:1;}
.b {font-weight:bolder;}
.e1 {position:relative;top:-63px;left:0px;z-index:10;font-size:24pt; color:#FF0000; display:none;-moz-user-select: none;-khtml-user-select: none;user-select: none; border:hidden;}
.x2 {font-size: 9px;}
.ly1 {display: block;}
.ly2 {display: none;}
.htable {position:relative;top:0px;right:0px;z-index:1;}
</style>

<script lng = "JavaScript" type="text/javascript">
function showOrHide(value) {
if (value==0) {
document.getElementById('l1').style.display='none';
document.getElementById('l2').style.display='block';
document.getElementById('l5').style.display='inline';
document.getElementById("sln").focus();
}
else if ((value==1) && (document.getElementById('sln').value=="")) {
document.getElementById('l1').style.display='block';
document.getElementById('l2').style.display='none';
document.getElementById('l5').style.display='none';
}
else if (value==2) {
document.getElementById('l5').style.top='-70px';
document.getElementById('l3').style.display='none';
document.getElementById('l4').style.display='block';
document.getElementById("lng").focus();
}
else if (value==3) {
// document.getElementById("l3").innerHTML = ('em '+ SLN);
document.getElementById('l5').style.top='-63px'
document.getElementById('l3').style.display='block';
document.getElementById('l4').style.display='none';
}
return false;
}

function kct1(event){
if(document.getElementById('qs').value!=='')
{
showOrHide(0);
}
return;
}
function kct2(event){
showOrHide(2);
document.getElementById("lng").focus();
return;
}
</script>

</head>
<BODY marginheight='150px' onload="document.getElementById('qs').focus(); vclear();" style="overflow: hidden;">
<form onsubmit="return checkform(this);">


</td><td width="15%"></td></tr></tbody></table>
<center>
<table border="0" width="25%"><tbody>
<tr><td>Pesquisar</td></tr>
<tr><td><input class="i1" maxlength="2048" id="qs" onkeydown="if(event.keyCode==9){kct1();return false}"/></td></tr>

<tr><td class="x2">
<div class="ly1" id="l1" onmousedown="showOrHide(0);" style="max-width:100px">Excluir da Pesquisa</div>
<div class="ly2" id="l2"><input class="i1" style="color:#FF0000" id='sln' maxlength="2048" onblur="showOrHide(1)" onkeydown="if(event.keyCode==9){kct2();return false}"/></div></td></tr>

<tr><td class="x2"><div class="ly1" id="l3" onmousedown="showOrHide(2);" style="max-width:110px">em português (Brasil)</div>

<div class="ly2" id="l4"><select class="i2" id="lng" onChange="SLN=[this.options[this.selectedIndex].text];" onBlur="showOrHide(3);"><option label="africâner" value="af">africâner</option><option value="sq">albanês</option><option value="de" class="b">alemão</option><option value="am">amárico</option><option value="ar">árabe</option><option value="hy">armênio</select></div></td></tr>
<tr><td><div class="e1" id="l5">-</div></td></tr>

</tbody></table></form>

</center>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum