We help IT Professionals succeed at work.

search text clear

codelevel
codelevel asked
on
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

Comment
Watch Question

Edwin HofferTechnical Expert
Top Expert 2014

Commented:
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

Author

Commented:
Placeholder does not work in all browsers. Also do not want to use inline js.
Edwin HofferTechnical Expert
Top Expert 2014

Commented:
Have you tried nclick and onblur code??
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
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

Author

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.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
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

Data Scientist
Most Valuable Expert 2014
Commented:
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

Author

Commented:
this worked. thanks.
Kyle HamiltonData Scientist
Most Valuable Expert 2014

Commented:
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