hinting text in field

I'm trying to figure out how to use a field title as a hint inside a field, but I'm not having any luck. I don't know if an inline class switch onblur/live is creating a clash with what I'm trying to do. The inline code is just a switch for some css that changes the look of a field when it's live.


<!-- first, this is the script I was trying to get working -->
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#phone").attr("class", "reg_off");
$("#phone").val("Enter search terms here");

$("#phone").focus(function() {
var className = $("#phone").attr("class");
if (className == "reg_off") {
$("#phone").val("");
$("#phone").attr("class", "reg_live");
}
});

$("#phone").blur(function() {
if ($("#phone").val().length == 0) {
$("#phone").attr("class", "reg_off");
$("#phone").val("Enter search terms here");
}
});
});
//]]>
</script>


and here's the two form fields I'm using to test this:<br>

<form name="register1" class="registration_form" method="post" action="register1.php" target="_self" onsubmit="return myForm()">
<input style="width:120px;" title="111-111-1111" type="text" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" name="phone" id="phone" value="" />
<br>
<b>Second phone</b><br><input style="width:120px;" title="111-111-1111" type="text" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" name="phone2" id="phone2" value="" />
<input type="submit" value="Submit" class="buttontype" onclick=”this.disabled=true;“/>
</form>


<!-- and, just in case, here's the css... -->
<style>

.reg_off {
border-width:2px;
padding: 2px;
border: solid 2px #0099ff;
color: #AAAAAA;

}

.reg_live {background-color:#ffff99;
border-width:2px;
padding: 5px;
border: solid 2px #ff9900;

}

.registration_form input {
-moz-border-radius:6px; /* Firefox */
-webkit-border-radius: 6px; /* Safari, Chrome */
-khtml-border-radius: 6px; /* KHTML */
border-radius: 6px; /* CSS3 */
padding: 2px;
border: solid 2px #0099ff;

}
</style>

I dont get what you are trying to do

you want some Text inside a text field ? telling the user what you are looking for ?

if so you can just use placeholder="someText"

to get placeholder to work in IE you can use jquery


<style type="text/css">
.placeholder
{
color: gray;
}
</style>



<!----- jQuery to allow PlaceHolder Text on IE ----->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
</script>


<!--- JavaScript For Placeholder ----->
<script type="text/javascript">

$(function() {
var input = document.createElement("input");
if(('placeholder' in input)==false) {
$('[placeholder]').focus(function() {
var i = $(this);
if(i.val() == i.attr('placeholder')) {
i.val('').removeClass('placeholder');
if(i.hasClass('password')) {
i.removeClass('password');
this.type='password';
}
}
}).blur(function() {
var i = $(this);
if(i.val() == '' || i.val() == i.attr('placeholder')) {
if(this.type=='password') {
i.addClass('password');
this.type='text';
}
i.addClass('placeholder').val(i.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var i = $(this);
if(i.val() == i.attr('placeholder'))
i.val('');
})
});
}
});

</script>

What I do is change the background image of the text box. You can do that with


window.document.form.text.backgroundImage="url('path/to/image.gif')";


and make a blurry image of the text you want.

Then use the text box's onFocus event to remove the background image.