How-to: text input fadeout

Hi,

How can I fade out input and textarea values? All my attempts result in fading out the whole elements, not their content.

Thanks in advance!

Mike

using jQuery:

<script>
$(“#myInput”).click(function() {
$(this).hide(“slow”);
});
</script>

<input id=“myInput” />

It fades out the whole input element, not just its value.

You could use the jquery animate plug-in and fade the text from the background color to the correct foreground colour. If it’s just the default values you are fading then you’d need to check the default values against the current text input value and then once faded clear the attribute value and then reset the text color back to the correct color so you could see what’s being typed in.

Or maybe something like this plugin would do the hard work for you. You could set the color to match the background again etc.

Gotcha… misunderstood the request.

This method fades the text by changing its colour until it matches the background colour. I have done it using a transition from black to white. Other combinations will need different intermediate values for the colours chosen.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Fade textbox inout</title>
<script type=“text/javascript”>
<!–
var allFades=new Array();
var fadeCols=[“000”,“080808”,“121212”,“1D1D1D”,“2A2A2A”,“383838”,“484848”,“575757”,“666”,“787878”,“888988”,“9A9A9A”,“AAA”,“BABABA”,“C9C9C9”,“D6D6D6”,“E3E3E3”,“FFF”]; // global
// ---------------------

var tOut, currentColour=-1; // global
function fadeIt()
{ clearTimeout(tOut);
// reduce colour
++currentColour;
window.status=currentColour;
if(currentColour<fadeCols.length)
{ for(i=0;i<allFades.length;i++)
{ allFades[i].style.color = “#”+fadeCols[currentColour];
}
tOut=setTimeout(fadeIt, 100)
}
}
// -----------------------
window.onload=function(){
// get collection of class fade objects
var i, dfe=document.myForm.elements;
for( i=0;i<dfe.length; i++)
{ if(dfe[i].className==“fade”)
{ allFades[allFades.length]=dfe[i]; }
}
}
// -----
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; font-weight:bold; text-align:center; margin:10px 0px; }
form { text-align:left; }
#wrap { position:relative; top:0px; left:0px; width:900px; height:500px; margin:0px auto; }

–>
</style>
</head>

<body>

<div id=“wrap”>
<form name=“myForm”>
<p><input class=“fade” type=“text” name=“tBox1” value=“BBB” size=“20”> </p>
<p><input class=“fade” type=“text” name=“tBox2” value=“CCCCC” size=“20”> </p>
<p><textarea class=“fade” name=“tArea1” cols=“50” rows=“5”>HHHHHHHH</textarea></p>
<p><input type=“button” value=“Fade input” name=“B1” onclick=“fadeIt()”> </p>
</form>
<!-- end form –>
</div>
<!-- end wrap –>

</body>

</html>

Here is a more interesting way to do the same thing. This one automatically determines all of the intermediate fade colours, rather than putting them in by hand.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Fade textbox input 2</title>
<script type=“text/javascript”>
<!–
var allFades=new Array(), fadeCols=new Array(), tOut, currentColour=-1; // global
// ---------------------
// fades all inout box text with class fade
function fadeIt()
{ clearTimeout(tOut);
// reduce colour
++currentColour;
var i;
if(currentColour<fadeCols.length)
{ for(i=0;i<allFades.length;i++)
{ allFades[i].style.color = fadeCols[currentColour];
}
tOut=setTimeout(fadeIt, 100)
}
}
// -----------------------
window.onload=function()
{ // get collection of class fade objects
var dfe=document.myForm.elements;
for(var i=0;i<dfe.length; i++)
{ if(dfe[i].className==“fade”)
{ allFades[allFades.length]=dfe[i]; }
}
// fill fadeCols array
var hexChars=“0123456789ABCDEF”;
var result, a, b;
for(var i=0;i<=255;i=i+15)
{ b= i%16;
a=(i-b)/16;
result=hexChars.charAt(a)+hexChars.charAt(b);
fadeCols[fadeCols.length]=“#”+result+result+result;
}
// make sure last one is background colour
fadeCols[fadeCols.length]=“#FFFFFF”;
}
// -----
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; text-align:center; margin:10px 0px; }
input, textarea { font-weight:bold; font-size:14px; color:#000; }
form { text-align:left; }
#wrap { position:relative; top:0px; left:0px; width:900px; height:500px; margin:0px auto; }

–>
</style>
</head>

<body>

<div id=“wrap”>
<form name=“myForm”>
<p><input class=“fade” type=“text” name=“tBox1” value=“BBB” size=“20”> </p>
<p><input class=“fade” type=“text” name=“tBox2” value=“CCCCC” size=“20”> </p>
<p><textarea class=“fade” name=“tArea1” cols=“50” rows=“5”>HHHHHHHH</textarea></p>
<p><input type=“button” value=“Fade input” name=“B1” onclick=“fadeIt()”> </p>
</form>
<!-- end form –>
</div>
<!-- end wrap –>

</body>

</html>

@Paul and Allan,

Good workaround, but what if the the text fields have a background image rather than a simple color?

Is this for placeholder text only or are you doing something else with the values?

If it was for placeholder text then you could absolutely place an element on top of the input in question which just containes the placeholder text and then fade that instead. You’d have to tie up all the loose ends etc as mentioned before

Actually, I’d like the default values to fade out on focus.

If it was for placeholder text then you could absolutely place an element on top of the input in question which just containes the placeholder text and then fade that instead.

Seems clever and the only choice!

Although once faded out you’d probably have to move it out of the way and then set the focus in the input underneath. You’d also have to ensure that users with javascript disabled had a usable method also as the element on top may stop them from getting to the input.

Instead perhaps better place the graphical input background in a parent of the input and then set the inputs background to transparent and borders to none. Then you can just fade in and out the input text as you originally wanted.

Perfect! :slight_smile:

I was implementing your idea when I came to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
* {font: 10pt Arial}
div.container {width:244px; height:22px; border:1px solid red;}
input {width:244px; height:22px; padding:3px;}
</style>
</head>
<body>
<div class="container"><input type="text" value="text"></div>
</body>
</html>

vs.

<html>
<head>
<title>Test</title>
<style type="text/css">
* {font: 10pt Arial}
div.container {width:244px; height:22px; border:1px solid red;}
input {width:244px; height:22px; padding:3px;}
</style>
</head>
<body>
<div class="container"><input type="text" value="text"></div>
</body>
</html>

If I don’t use a doctype, the result seems correct!

Even the following doesn’t look right:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
* {font: 10pt Arial}
div.container {width:244px; height:22px; border:1px solid red;}
input {width:100%; height:100%;}
</style>
</head>
<body>
<div class="container"><input type="text" value="text"></div>
</body>
</html>

HI,

Set it up like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
form{
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
}
label{
    font-size:13px;
    vertical-align:middle;
    display:inline-block;
    width:200px;
    height:22px;
    line-height:22px;
    margin:0 10px 0 0;
    text-align:right;
}
.inp, .inp input {
    width:244px;
    height:22px;
    margin:0;
    line-height:22px;
    border:1px solid red;
    background:blue;
    display:inline-block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
    vertical-align:middle;
}
.inp input {
    border:none;
    background:transparent;
    padding:0 10px;
    width:224px;
    color:#fff;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
    <fieldset>
    <legend>Example Form</legend>
    <label for="fade1">Enter text:</label>
    <span class="inp">
    <input type="text" name="fade" id="fade1" value="Enter text">
    </span>
</fieldset>
</form>
</body>
</html>