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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Edwin HofferTechnical ExpertCommented:
Have you tried nclick and onblur code??
0
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.