Multicoloured text in INPUT elements?

[Rancid Buttchutney]

I guess the subject says it all, really, and I know it's
not a standard of the feature-set, but has anyone
experimented with it?

I'm writing an autocompleting INPUT element and
would like it to display its choice based on the current
text but in a different colour. I'm sure this could be
done with transparent layers, but I haven't looked into
it and would be interested to hear anyone else's
experiences (may save me from reinventing the
wheel).

Thankya kindly.

[ASM]

Rancid Buttchutney a écrit :

I'm writing an autocompleting INPUT element and
would like it to display its choice based on the current
text but in a different colour. I'm sure this could be
done with transparent layers, but I haven't looked into
it and would be interested to hear anyone else's
experiences (may save me from reinventing the
wheel).

<style type="text/css">
input.green { background: lime }
input.blue { background: skyblue }
input { background: lightyellow }
input:hover, input.ieOver { background: yellow }
input:focus, input.ieOn { background: gold }
</style>
<script type="text/javascript">
function backColor(what) {
if(what.value.length<1) what.className='';
else if((what.value)*1) what.className='green';
else what.className = 'blue';
}
var IE = false; /*@cc_on IE=true; @*/
onload = function() {
var I = document.getElementsByTagName('input');
for(var i=0; i<I.length; i++)
if(I[i].type == 'text') {
I[i].onchange = function(){backColor(this);}
if(IE) {
I[i].onmouseover = function(){this.className='ieOver';}
I[i].onmouseout = function(){backColor(this);}
I[i].onfocus = function(){this.className='ieOn';}
I[i].onblur = function(){backColor(this);}
}
}
}
</script>

tested with FireFox; Opera, IE Mac

[Evertjan.]

ASM wrote on 01 nov 2006 in comp.lang.javascript:

var IE = false; /*@cc_on IE=true; @*/
onload = function() {
var I = document.getElementsByTagName('input');
for(var i=0; i<I.length; i++)
if(I[i].type == 'text') {
I[i].onchange = function(){backColor(this);}

IE will be happy with css like this:

input { background-color:expression(value!=defaultValue?"cyan":"");}

Which can be very useful for serverside database management
in webmaster only pages, where IE only is not so terrible,
and otherwise the above degrades nicely to not working.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[ASM]

Evertjan. a écrit :

ASM wrote on 01 nov 2006 in comp.lang.javascript:

>var IE = false; /*@cc_on IE=true; @*/
onload = function() {
var I = document.getElementsByTagName('input');
for(var i=0; i<I.length; i++)
if(I[i].type == 'text') {
I[i].onchange = function(){backColor(this);}

IE will be happy with css like this:

input { background-color:expression(value!=defaultValue?"cyan":"");}

in my example the IE instructions are for pseudo-classes
:focus and :hover

would it be possible to have an expression for these ones ?

Which can be very useful for serverside database management
in webmaster only pages, where IE only is not so terrible,
and otherwise the above degrades nicely to not working.

[Evertjan.]

ASM wrote on 02 nov 2006 in comp.lang.javascript:

>IE will be happy with css like this:

input { background-color:expression(value!=defaultValue?"cyan":"");}

in my example the IE instructions are for pseudo-classes

>:focus and :hover

would it be possible to have an expression for these ones ?

Possible yes, usefull no:

<script type='text/javascript'>
var hov;
</script>
<style>
input { background-color:expression(hov=="over"?"cyan":"");}
</style>
<input onmouseover = 'hov="over"' onmouseout = 'hov = "out"'>

IE7 tested

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Matt Kruse]

Evertjan. wrote:

input { background-color:expression(value!=defaultValue?"cyan":"");}
Which can be very useful for serverside database management
in webmaster only pages, where IE only is not so terrible,
and otherwise the above degrades nicely to not working.

Be careful with expressions, though. They get re-evaluated constantly, even
with mouse moves. I once wrote an app that used expressions almost exactly
like the above, to automatically highlight unfilled fields. Worked great,
but it also caused the system to slow down a lot on big forms. I went back
to the "old" way, and now I only use expressions when absolutely necessary.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[Evertjan.]

Matt Kruse wrote on 02 nov 2006 in comp.lang.javascript:

Evertjan. wrote:

>input { background-color:expression(value!=defaultValue?"cyan":"");}
Which can be very useful for serverside database management
in webmaster only pages, where IE only is not so terrible,
and otherwise the above degrades nicely to not working.

Be careful with expressions, though. They get re-evaluated constantly,
even with mouse moves. I once wrote an app that used expressions
almost exactly like the above, to automatically highlight unfilled
fields. Worked great, but it also caused the system to slow down a lot
on big forms. I went back to the "old" way, and now I only use
expressions when absolutely necessary.

Used only for my own benefit in my webmaster only pages,
I love theis perhaps quick and dirty solution.

If my pc slows down clientside, I will take measures, Matt,
but with upto say 30 input fields, I never felt the problem.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)