search text clear

on keypress after focus on the textbox, text should disappear. on tab out should appear again. please help.

<!DOCTYPE html>
<head>
</head>
<body>
<input type="text" value="enter search text" />
</body>
</html>

Open in new window

codelevelAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Edwin HofferTechnical ExpertCommented:
Hello

You can use placeholder tag in input.

placeholder="Search..."

Open in new window


Or you can use onclick and onblur code in input tag

onClick="if(this.value=='Search...')value='';" onBlur="if(this.value=='')value='Search...';"

Open in new window


Hope that helped you.

Thanks
Edwin
0
codelevelAuthor Commented:
Placeholder does not work in all browsers. Also do not want to use inline js.
0
Edwin HofferTechnical ExpertCommented:
Have you tried nclick and onblur code??
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Kyle HamiltonData ScientistCommented:
If browser compatibility is a concern, you can use a polyfill. This will make placeholders work in all browsers.

In particular, here is a popular polyfill for placeholders if you are using jquery.

https://github.com/mathiasbynens/jquery-placeholder

example usage:

<input type="search" name="search" placeholder="Search this site…">
<textarea name="message" placeholder="Your message goes here"></textarea>

Open in new window


and in your javascript:

$('input, textarea').placeholder();

Open in new window


More documentation can be found at the above link
0
codelevelAuthor Commented:
polyfill fails in ie9. as soon as the focus is on the text field the text disappears. it needs to wait till the user key in.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Did you try the code Kyle referred to?  I have a working sample http://jsbin.com/qojiwigaxu/1/edit?html,output but no way to test ie9.  Or Edwin's code?  If it works you can just move it to a jquery function so it is not inline.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Another similar option http://jamesallardice.github.io/Placeholders.js/

Working sample with that library http://jsbin.com/neqepalezo/1/edit
<!doctype html>
<html data-placeholder-focus="false">
    <head>
        <meta charset="utf-8">
        <title>Placeholders.js Default Config</title>
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    </head>
    <body class="placeholder-example">
        <input type="text" placeholder="I have a placeholder!"><br>
        <input type="password" placeholder="Password placeholders!"><br>
        <textarea placeholder="We all hide on input!"></textarea>
        <script src="assets/js/placeholders.min.js"></script>
    </body>
</html>

Open in new window

0
Kyle HamiltonData ScientistCommented:
Try this, it works in IE9. It's rather crude at this point, but it can be cleaned up, made to work more dynamically (ie, no hardcoded values, etc...).  Also, a check should be put in place for browsers that support placeholders not to use this code.

http://jsbin.com/fekipanave/1/

js:
$(function(){
  $('input').addClass('real').wrap('<div class="relative">');
  
  $('<input type="text" value="Search.." disabled class="disabled">').insertAfter('.real')
  .css({'position':'absolute','top':'0','left':0,'z-index':10});
  
  $('.real').on({
    'focus' : function(e){
       var that = $(this);
       if(that.val() === 'Search...'){
         that.val('');
       }
       
     },
    'keyup':function(){
      var that = $(this);
      if(that.val().length){
        that.css({'background-color':'#fff','color':'#000'});
      }else{
        that.css({'background-color':'transparent'});
      }
      
    },
    'blur': function(){
        var that = $(this);
        if(that.val() === ''){
          that.val('Search...');
          that.css({'background-color':'transparent','color':'#ccc'});
        }
         
        }
  });
 });

Open in new window


css:
input{
  background-color:transparent;
  position:relative;
}
.relative{
  position:relative;
}
input.real{
  z-index:100;
  color:#ccc;
}

Open in new window


html:
<input type="text" value="Search...">

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
codelevelAuthor Commented:
this worked. thanks.
0
Kyle HamiltonData ScientistCommented:
I cleaned it up a little bit. so you don't need to write any extra CSS. This one is JS only:

It could be made even more generic, but at least it's not as messy as the last one.

http://jsbin.com/diruvewusu/1/

$(function(){
  
  $('input').addClass('real')
  .css({'position':'relative','z-index':100,'background-color':'transparent'})
  .wrap('<div class="relative" style="position:relative">');
  
  $('<input type="text" value="" class="fake">')
  .insertAfter('.real')
  .css({'position':'absolute','top':'0','left':0,'z-index':10});
  
  $('.real').on({
    'focus' : function(e){
       var that = $(this);
       if(that.val() === 'Search...'){
         that.val('');
         that.next('.fake').val('Search...');
       }else{
         that.next('.fake').val('');
       }
     },
    'keyup':function(){
      var that = $(this);
      if(that.val().length){
        that.next('.fake').val('');
      }else{
        that.next('.fake').val('Search...');
      }
    },
    'blur': function(){
        var that = $(this);
        if(that.val() === ''){
          that.val('Search...');
          that.next('.fake').val('');
        }
    }
  });
 });

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.