...

View Full Version : another criterion to the choice of affected text field



eydg
11-29-2012, 06:25 AM
<form>
<input></form>
<FORM name="orthisone-probablynot">
<input type="TEXT" name="naam" size="20" value=""
id="thisone" style="background-color:0000ff">


<center>
</center>
</form>


</center>

<script language="javascript">
var bkColor = "red";
function getEvent(e){
if(window.event != null) {
return event;
}
return e;
}
function setBKColor(e){
e = getEvent(e);
var src = e.srcElement || e.target;
window.status="t";
if(src != null) {
src.style.bkColor = src.style.backgroundColor;
src.style.backgroundColor = bkColor;
}
}
function reSetBKColor(e){
e = getEvent(e);
var src = e.srcElement || e.target;
if(src != null) {
src.style.backgroundColor = src.style.bkColor;
}
}
function attachEvent(name,element,callBack) {
if (element.addEventListener) {
element.addEventListener(name, callBack,false);
} else if (element.attachEvent) {
element.attachEvent('on' + name, callBack);
}
}

function setListner(eve,func) {
var ele = document.forms[0].elements;
for(var i = 0; i <ele.length;i++) {
element = ele[i];
if (element.type) {
switch (element.type) { case 'text':

attachEvent(eve,element,func);
}
}
}
}
setListner("focus",setBKColor);
setListner("blur",reSetBKColor);
</script>


This piece of code changes the bg color of the first text field on the page.

How to add another criterion - that if input field's ID, so that it would be possible to click red the second field on the page IDd as "thisone"?

devnull69
11-29-2012, 07:13 AM
I don't get it ... your last line of text should be rewritten because it's hard (impossible?) to understand.

Philip M
11-29-2012, 07:42 AM
I know that inline code is disapproved of, but the requirement (as I understand it) is so simple that I am tempted. Event listeners are perhaps overkill here.


<input type="TEXT" name="naam" id="thisone" size="20" value="" style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' " >
<br>
<input type="TEXT" name="naam2" id="thisone2" size="20" value="" style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' " >
<br>
<input type="TEXT" name="naam3" id="thisone3" size="20" value="" style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' " >

Be aware that <script language = "Javascript"> and the <center> tags are obsolete and deprecated. So are form names - the form should be assigned an id instead.

Also be aware that each id must be unique - you cannot have two elements with the same id.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

eydg
11-29-2012, 03:02 PM
Thanks. I have modified js accordingly to your changes in html, to the code looks like this:

<!--not working in internet explorer-->


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body><form><input></form>
<input type="TEXT" name="naam" id="thisone" size="20" value="" style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' " >
<br>
<input type="TEXT" name="naam2" id="thisone2" size="20" value="" style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' " >
<br>
<input type="TEXT" name="naam3" id="thisone3" size="20" value="" style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' " />


</center>

<script language="javascript">
var bkColor = "red";
function getEvent(e){
if(window.event != null) {
return event;
}
return e;
}
function setBKColor(e){
e = getEvent(e);
var src = e.srcElement || e.target;
window.status="t";
if(src != null) {
src.style.bkColor = src.style.backgroundColor;
src.style.backgroundColor = bkColor;
}
}
function reSetBKColor(e){
e = getEvent(e);
var src = e.srcElement || e.target;
if(src != null) {
src.style.backgroundColor = src.style.bkColor;
}
}
function attachEvent(name,element,callBack) {
if (element.addEventListener) {
element.addEventListener(name, callBack,false);
} else if (element.attachEvent) {
element.attachEvent('on' + name, callBack);
}
}

function setListner(eve,func) {
var ele = document.getElementById("thisone2");

element = ele;


attachEvent(eve,element,func);
}


setListner("focus",setBKColor);
setListner("blur",reSetBKColor);
</script>
</body>
</html>


And it does work as expected - to put it to test, I added a form above, to see if it does not mess up the identification if the thisone2 field. All is well now, except for internet explorer.

In ie
1) thisone2 field - the one that is affected does not change its color upon focus somewhere else. It remains red.
2) all the 3 fields do get affected by clicking, while only the middle one should.

Have I messed something now?

PS. Thank you for these general informations on JS, too. I am forgetting.

Philip M
11-29-2012, 03:25 PM
Why not just use the code I gave you? You do not need any additional scripts.

eydg
11-29-2012, 06:30 PM
Ah yes.

That's a very neat solution. However, it does not work if the code starts with:


<!doctype html>


So a typical html5 header makes it not work.

Is that solution you proposed getting obsolete?

Philip M
11-29-2012, 06:53 PM
Ah yes.

That's a very neat solution. However, it does not work if the code starts with:


<!doctype html>


So a typical html5 header makes it not work.

Is that solution you proposed getting obsolete?

The HTML5 spec removes attributes and tags that control the look or style of any element, and is no longer tolerant of inline styling.

Try this instead:-


<!DOCTYPE html>
<head>

<style type = "text/css">
.stylex {background-color:#0000FF}
.styley {background-color:#FF0000}
</style>
</head>
<body>

<input type="text" name="naam" id="thisone" class = "stylex" size="20" value="" onfocus= "this.className = 'styley' " onblur = "this.className = 'stylex' ">
<br>
<input type="text" name="naam2" id="thisone2" class = "stylex" size="20" value="" onfocus= "this.className = 'styley' " onblur = "this.className = 'stylex' ">
<br>
<input type="text" name="naam3" id="thisone3" class = "stylex" size="20" value="" onfocus= "this.className = 'styley' " onblur = "this.className = 'stylex' ">
<br>

</body>

</html>

eydg
11-29-2012, 08:28 PM
Thank you very much. Now it works under all conditions.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum