http://www.web-source.net/javascript_disappearing_form_text.htm
This shows exactly what I want to do but it does not work in chrome localhost the text just stays there. I don't understand why everything is always screwed up in local host :@ . I want to make this with Jquery to make it more accessible for my users. Thanks for your all of your help in advance.
Did you link to the jQuery library?
Yes I did but it doesn't work. I don't know im going to keep trying. Im a noob in Jquery so it might take a while for an update until I'm done.
Hi try this...
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myTextBox').click(function(){
$('#myTextBox').val("");
});
$('#myTextBox').blur(function(){
var currentText = $('#myTextBox').val();
if(currentText == "")
{
$('#myTextBox').val("Enter text");
}
});
});
</script>
</head>
<body>
<input type="text" id="myTextBox" value="Enter text">
</body>Thanks a million works like a charm. All I can say is wow. Sorry to bother you but can you recommend some place I can read up on this stuff because I would just like to know how this works and get into jquery. Another thing is can I do this for two inputs. Like copy the code and change it to the other inputs name and it would do both? Thanks again help me out so much.
Hi minimogul,
There are lots of jQuery tutorials available, me also a beginner in this. You can start learning from the official jQuery site http://docs.jquery.com/Tutorials. Also checkout the API reference given.
This can be used for multiple text boxes.
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input:text').click(function(event){
$(event.target).val("");
});
$('input:text').blur(function(event){
if($(event.target).val() == "")
{
$(event.target).val("Enter text");
}
});
});
</script>
</head>
<body>
<input type="text" id="myTextBox" value="Enter text"><br />
<input type="text" id="myTextBox2" value="Enter text"><br />
<input type="text" id="myTextBox3" value="Enter text">
</body>Just a word to the wise, not everyone uses a mouse or a touch screen, so instead of ONCLICK event use ONFOCUS, it will handle on click and when users tab to it as well.
Cheers!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.