SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    clear / reset "x" button inside input-field?

    Hello guys,
    I do not know if this belongs in CSS or HTML. I would think HTML or even JS.

    But I was wondering how does one make one of those x clear buttons on the right and inside an input-field? Is it an attribute ofthe input tag or is it a -webkit attribute that can only be seen in webkit browsers.

    I think a good example of what I am trying to accomplish is after one types something into :Google:'s input search field bar

    I swear it was there at one point, but now I can not find it.

    It is still in Apple's search bar in the menu bar. If you start typing there, the white x in a grey circle appears to the right and inside of the input field and when it is clicked the field is reset or cleared.

    Any ideas on how to do this?

    Regards,
    Team 1504

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Apple uses JS to accomplish that.

    HTML Code:
    <input type="search">
    adds an x when you start typing in the text field in webkit browsers.

  3. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    How does one do it in js, though?

    Also, are there anyways to do something like that in css / css3 or html / html5?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The only way I know of to do it is using the HTML 5 input type already mentioned.

    The only other way to fdo it would be to fake it by placing one field on top of another.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Oh ! I thought you meant apple uses JS along with <input type="search" />

    Okay, well its not necessary. so ill make sure the field in question has type="search"

    Thank you all!

    P.S. I realised where I saw that x with :Google: its on the new mobile version of their home

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    DuckDuckGo has the little cross too. If you click it, it clears the search input. And, it's keyboard-accessible : )

    I would avoid the input type="search" for now because while only webkit does anything with it, you can't control *what* it does with it (you can't style it or anything). So Javascript is the way to go here, with a regular input type="text" I would say.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Meanwhile that's one of those things pissing me off when I encounter it -- sucking down width that could be used to show me what's typed on something as simple as CTRL-A Backspace... Wasting extra code on that to boot?

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    sucking down width that could be used to show me what's typed on something as simple as CTRL-A Backspace... Wasting extra code on that to boot?
    It's for moms... you know, those people who fill out forms using mice? Lawlz.

    I save my hate for autocomplete and autofocus. Those are evil enough to have come straight from the frozen hells.

  9. #9
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes
    DuckDuckGo has the little cross too. If you click it, it clears the search input. And, it's keyboard-accessible : )

    I would avoid the input type="search" for now because while only webkit does anything with it, you can't control *what* it does with it (you can't style it or anything). So Javascript is the way to go here, with a regular input type="text" I would say.
    Oh, I forgot that I already had it set to type="text". When I read the solution, that CletusSpuckler & Felgall posted, I thought that I had forgot the type attribute in my html.

    But now that I am looking at my code, I see that I had it set to text. Man, there are a lot of bloody HTML5 input types

    Quote Originally Posted by deathshadow60
    Meanwhile that's one of those things pissing me off when I encounter it -- sucking down width that could be used to show me what's typed
    True, width is width. And then the user's input has a greater chance of not fitting and the earlier characters shifted left and hidden, which I hate!

    Quote Originally Posted by deathshadow60
    on something as simple as CTRL-A Backspace... Wasting extra code on that to boot?
    Oh да! Pssh why the hell would I waste code then if the user can do that.
    Sometimes I have to think things out

    Quote Originally Posted by Stomme poes
    Less is more— especially in Computer Science / Programming
    lawlz lawlz

    Quote Originally Posted by Stomme poes
    I save my hate for autocomplete and autofocus. Those are evil enough to have come straight from the frozen hells.
    True that ( Tru Dat ) I hate those. autocomplete is always set to off for my forms. And I seriously believe that it should be off by default! And the only reason why autofocus is semi-acceptable is when the only thing on a page is a form. Even 's home-page has content other than the form!


Tags for this Thread

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
  •