I want to edit the value="" in my input field

**tombempty** · May 10, 2010 12:19

Hello All:

I currently have this on my site,

<input onfocus="this.value=''" onblur="this.value='Enter Product Name, Keyword, or Item Code'" type="text" value="Enter Product Name, Keyword, or Item Code" type="TEXT" name="q" size="30">

so that when someone clicks on the input box the information inside goes away but for the life of me, how do I style the value inside the box?

I want to change that text with out the txt being typed in there have that same style. Which is the issue I am running into when I edit the css for the page.

Thanks for any help or advice on this,

Paul

**Raffles** · May 10, 2010 12:36

Let me get this straight - you want the user-inputted text to have a different style to the default text?

Then this isn't an (X)HTML question at all. It's more javascript and CSS than anything. IF that's what you want, you need to give the element a different class name the moment the user inputs text. That class name will trigger the style you want.

By the way, the way you have it set up at the moment, if the user types stuff in and then focuses elsewhere, what they typed in will return to the default text. Similarly, if they return to edit what they typed, it'll go blank. You need some more bulletproof logic for this! But first we should establish if what I mentioned in the first paragraph above is what you're after.

**tombempty** · May 10, 2010 12:58

Hi Raffles and thanks for the help.

What I want is to style the value="" part of the input tag to be styled, not what the user types.

When I style it in css it styles what the user types not the value="" part in the input tag itsef

Thanks for any help or advice on this,

P

**dogFang** · May 10, 2010 12:59

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>clear</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
window.onload=function() {
var searchSite = document.getElementById('searchSite');
searchSite.onfocus = function() {if(this.value==this.defaultValue){this.value='';this.style.color='#000';}};
searchSite.onblur = function() {if(this.value==''){this.value=this.defaultValue;this.style.color='#888';}};
};
</script>

<style type="text/css">
* {margin:0;padding:0;}
#searchSite {color:#888;}
</style>

</head>
<body>
<form action="#" name="form1">
<div>
    <label>
        <input id="searchSite" name="searchSite" type="text" value="Search my site">
    </label>
</div>
</form>
</body>
</html>

**rustybuddy** · May 10, 2010 12:59

Something like this?

onfocus="if (this.value == 'Enter Product Name, Keyword, or Item Code') { this.value = ''; this.style.color = '#000';}"

If this is something that is re-occurring I would build a javascript function for it to keep this messy code out of the html.

**Raffles** · May 10, 2010 14:01

When I style it in css it styles what the user types not the value="" part in the input tag itsef

Are you saying that "Enter Product Name, Keyword, or Item Code" is in a different style to what I'd see if I typed in "hello"?? That's pretty weird. It's a bit shady what you mean by the value="" part. Do you mean when it's blank (no text in it)?

**tombempty** · May 10, 2010 14:12

basically, I want the input box the words that I have in there as the value to be formatted a certain way.

So the words " Enter Product Name, Keyword, or Item Code" I want them to be in a certain style.

What the user types in there is fine as it just pertains to the input class in my css so I don't need that formatted.

I just want those words that say Enter Product Name, bla bla bla to be Italics and I do not know how to do that within the onfocus or on blur statements I have in the input tag...

I hope that is more clear, sorry if it was not as of yet.

**Raffles** · May 10, 2010 16:38

The text in the box should be affected by the CSS regardless of whether it's in there already or whether the user typed it in.

What you want to do is this:

Code css:

input {
  font-style:italic; /* default state */
}
input:focus {
  font-style:regular; /* when focused */
}

That should do it. No need to put it in the javascript. You still need the javascript to change the text though.

**tombempty** · May 10, 2010 18:26

ahhhh, that is what I was looking for... Thanks so much raffle for all your help with this,

Paul

**SalmanAbbas007** · May 20, 2010 18:08

Thaaaaaaaaaaaaaaanks Raffle U made my day lol.
I think we cannot change font-style using javascript I tried again & again but was not able to get it to work. We have to use id:focus to change font-style.

User Tag List

Thread: I want to edit the value="" in my input field

Thread Tools

Display

I want to edit the value="" in my input field

Bookmarks

Bookmarks

Posting Permissions