I have an input field:
<input name="Name" value="Enter Your Name">
How would I get it to remove the pre-defined text (Enter Your Name) when the user clicks the box.
As far as I am aware Javascript is the best way to do this. If that wrong please inform me.
This question is related to
javascript
html
You are likely wanting placeholder functionality:
<input name="Name" placeholder="Enter Your Name" />
This will not work in some older browsers, but polyfills exist (some require jQuery, others don't) to patch that functionality.
If you wanted to roll your own solution, you could use the onfocus and onblur events of your element to determine what its value should be:
<input name="Name" value="Enter Your Name"
onfocus="(this.value == 'Enter Your Name') && (this.value = '')"
onblur="(this.value == '') && (this.value = 'Enter Your Name')" />
You'll find that most of us aren't big fans of evaluating JavaScript from attributes like onblur and onfocus. Instead, it's more commonly encouraged to bind this logic up purely with JavaScript. Granted, it's a bit more verbose, but it keeps a nice separation between your logic and your markup:
var nameElement = document.forms.myForm.Name;
function nameFocus( e ) {
var element = e.target || window.event.srcElement;
if (element.value == "Enter Your Name") element.value = "";
}
function nameBlur( e ) {
var element = e.target || window.event.srcElement;
if (element.value == "") element.value = "Enter Your Name";
}
if ( nameElement.addEventListener ) {
nameElement.addEventListener("focus", nameFocus, false);
nameElement.addEventListener("blur", nameBlur, false);
} else if ( nameElement.attachEvent ) {
nameElement.attachEvent("onfocus", nameFocus);
nameElement.attachEvent("onblur", nameBlur);
}
u can use placeholder and when u write a text on the search box placeholder will hidden. Thanks
<input placeholder="Search" type="text" />
This is the right, cross-browser way to do it :
<input type="text" value="Enter Your Name" onfocus="if(this.value == 'Enter Your Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter Your Name'; } " />
In addition to placeholder="your text" you could also do onclick="this.value='';
So it would look something like:
<input name="Name" value="Enter Your Name" onclick="this.value='';>
<input name="Name" value="Enter Your Name" onfocus="freez(this)" onblur="freez(this)">
function freez(obj)
{
if(obj.value=='')
{
obj.value='Enter Your Name';
}else if(obj.value=='Enter Your Name')
{
obj.value='';
}
}
This should do it:
HTML
<input name="Name" value="Enter Your Name" onClick="blankDefault('Enter Your Name', this)">
JavaScript
function blankDefault(_text, _this) {
if(_text == _this.value)
_this.value = '';
}
There are better/less obtrusive ways though, but this will get the job done.
You actually want to show a placeholder, HTML 5 offer this feature and it's very sweet !
Try this out :
<input name="Name" placeholder="Enter Your Name">
As stated before I even saw this question placeholder is the answer. HTML5 for the win! But for those poor unfortunate souls that cannot rely on that functionality take a look at the jquery plugin as an augmentation as well. HTML5 Placeholder jQuery Plugin
<input name="Name" placeholder="Enter Your Name">
Use onclick="this.value=''":
<input name="Name" value="Enter Your Name" onclick="this.value=''">
Source: Stackoverflow.com