SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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
    ********
    Regards,

    P

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    ********
    Regards,

    P

  4. #4
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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)?

  7. #7
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ********
    Regards,

    P

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahhhh, that is what I was looking for... Thanks so much raffle for all your help with this,

    Paul
    ********
    Regards,

    P

  10. #10
    SitePoint Member
    Join Date
    May 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •