CODEWITHSUNDEEP
csshtml
theGame
theGame

Reputation: 393

What will be the css of this input field?

i have an input field saying enter your name, i want to add CSS settings that when i click in the field "enter you name" disappears.

when i click out of it, if i haven't entered any thing "enter your name" comes back.

what will be the solution for this problem? is it CSS only ? or JavaScript?

Upvotes: 1

Views: 121

Answers (9)

chhameed
chhameed

Reputation: 4456

Simply use this 

<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';}">

Hope its help

Upvotes: 2

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

This is not a CSS thing

You can simply use :

<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';}">

If you're designing for modern browsers that support HTML5 you could simply use something like this :

<input type="text" placeholder="Enter Your Name" />

This way when they field is focused the text will disappear

Now to make it work for older browsers you could use this jQuery plugin called HTML5 Forms. It also add a support a lot of HTML5 forms on older browsers.

Upvotes: 1

thirtydot
thirtydot

Reputation: 228182

Use the placeholder attribute.

Unfortunately, it's not supported in every browser.

So, you must use a JavaScript fallback to make it work in those browsers. I recommend this one:

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

Take a look at the demo in a browser that does support placeholder such as Chrome, and then in a browser that does not such as IE9:

http://mathiasbynens.be/demo/placeholder

Upvotes: 0

user166560
user166560

Reputation:

Normally, that's done with JavaScript, but if you're against using JavaScript, you could use a background image that says "Enter your name", and have it disappear when the field is focused.

input#namefield {
    background: url(enter_your_name.png);
}

input#namefield:focus {
    background-image: none;
}

Upvotes: 1

gorootde
gorootde

Reputation: 4073

If I have understood your question, you want to hide the whole input box. You have to use javascript in combination with css.

document.getElementById("id").style.display = "none";

will hide the div that contains your input field

document.getElementById("id").style.display = "block";

will show your div again. All you have to do is copy these two snipplets into the javascript events you prefer.

Upvotes: 1

Mr.T.K
Mr.T.K

Reputation: 2356

try this one:

<input name="textfield1" type="text" class="login_te" value="enter you name" onblur="if(this.value=='')this.value='enter you name';" onfocus="if(this.value=='enter you name')this.value='';" />

Upvotes: 2

maligree
maligree

Reputation: 6147

Have you looked at the HTML5 placeholder attribute?

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34855

If you use the html5 doctype in your pages, this is easy

<input type="text" name="first_name" placeholder="Enter your name">

Use the placeholder attribute and any modern browser will do the rest.

If the browser does not support the placeholder attribute, you will need to use javascript.

Upvotes: 2

Fender
Fender

Reputation: 3055

you have to use javascript:

<input type="text" value="Click..." onfocus="if(this.value == 'Click...')this.value='';" onblur="if(this.value == '')this.value='Click...';" />

Upvotes: 1

Related Questions