Back To Website Design Forum

watermark search box

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post November 28th, 2009, 10:19 am

I want to have a text box that has some text in it say search box and when you click it it clears then you can search for something. But if the box is clear then it will re type the words search box back in, also if I type in a term and then click on the term I don't want it to clear I have been trying to do this using javascript but not got very far.
Here is what I have got
Code: [ Select ]
<input type="text" name="learnBox" id="learnBox" onclick="this.value=''" value="Enter a subject, video title or video ID" />
^__^
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 28th, 2009, 10:19 am

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post November 28th, 2009, 11:22 am

Are you using any sort of javascript libraries such as jQuery, Prototype, etc on your pages already ?
Strong with this one, the sudo is.
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post November 28th, 2009, 11:50 am

not at this time - javascript is a bit of a unknown to me im just getting started with it.
^__^
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post November 28th, 2009, 12:17 pm

You'll want to use the "onfocus" and "onblur" legacy events instead of the "onclick" legacy event.

The focus event fires when someone selects the text box to make an edit, and the blur event fires when they're no longer editing it.

HTML Code: [ Select ]
<input type="text" name="learnBox" id="learnBox" value="" />
<script type="text/javascript">
var default_lb = 'Enter a subject, video title or video ID';
var lb = document.getElementById('learnBox');
lb.value = default_lb;
lb.onfocus = function()
{
   if(lb.value == default_lb)
   {
      lb.value = '';
   }
}
lb.onblur = function()
{
   if(lb.value == '')
   {
      lb.value = default_lb;
   }
}
</script>
  1. <input type="text" name="learnBox" id="learnBox" value="" />
  2. <script type="text/javascript">
  3. var default_lb = 'Enter a subject, video title or video ID';
  4. var lb = document.getElementById('learnBox');
  5. lb.value = default_lb;
  6. lb.onfocus = function()
  7. {
  8.    if(lb.value == default_lb)
  9.    {
  10.       lb.value = '';
  11.    }
  12. }
  13. lb.onblur = function()
  14. {
  15.    if(lb.value == '')
  16.    {
  17.       lb.value = default_lb;
  18.    }
  19. }
  20. </script>
Strong with this one, the sudo is.
  • ultimate11
  • Student
  • Student
  • No Avatar
  • Joined: Feb 02, 2011
  • Posts: 86
  • Status: Offline

Post July 31st, 2011, 10:05 pm

guys there is much simpler.. :mrgreen:
Code: [ Select ]
<input type="text" name="learnBox" onfocus="this.value=''" onblur="this.value='Search'" value="Search"/>
  • Poly
  • Guru
  • Guru
  • User avatar
  • Joined: Jul 31, 2004
  • Posts: 1054
  • Loc: Same place you left me.
  • Status: Offline

Post August 3rd, 2011, 5:34 pm

Use placeholder.

Code: [ Select ]
<input type="text" id="search" placeholder="Search..." />


Browser Support
Chrome
Firefox 3.7+
Internet Explorer 9+
Avant Browser(Not sure)
Opera (Somewhere around v 11)
Safari 4+

Obviously not everybody is running a HTML5 browser, yet, so were going to need to fake it for the other, inferior browsers.

Add this to the head of each page, or add it to a separate script and call it on each page:
Code: [ Select ]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
  jQuery.support.placeholder = false;
  test = document.createElement('input');
  if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
  if(!$.support.placeholder) {
   var active = document.activeElement;
   $(':text').focus(function () {
     if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
      $(this).val('').removeClass('hasPlaceholder');
     }
   }).blur(function () {
     if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
      $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
     }
   });
   $(':text').blur();
   $(active).focus();
   $('form:eq(0)').submit(function () {
     $(':text.hasPlaceholder').val('');
   });
  }
});
</script>
<style>
.hasPlaceholder {
  color: #777;
}
</style>
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script>
  3. // This adds 'placeholder' to the items listed in the jQuery .support object.
  4. jQuery(function() {
  5.   jQuery.support.placeholder = false;
  6.   test = document.createElement('input');
  7.   if('placeholder' in test) jQuery.support.placeholder = true;
  8. });
  9. // This adds placeholder support to browsers that wouldn't otherwise support it.
  10. $(function() {
  11.   if(!$.support.placeholder) {
  12.    var active = document.activeElement;
  13.    $(':text').focus(function () {
  14.      if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
  15.       $(this).val('').removeClass('hasPlaceholder');
  16.      }
  17.    }).blur(function () {
  18.      if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
  19.       $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
  20.      }
  21.    });
  22.    $(':text').blur();
  23.    $(active).focus();
  24.    $('form:eq(0)').submit(function () {
  25.      $(':text.hasPlaceholder').val('');
  26.    });
  27.   }
  28. });
  29. </script>
  30. <style>
  31. .hasPlaceholder {
  32.   color: #777;
  33. }
  34. </style>


What the above code does, is check to see if the browser is compatible with placeholder. If it isn't, it mimics the effect using CSS. The color value inside .hasPlaceholder is the color of the faked placeholder text inside your text box. #777 is the default placeholder value.

Now every single browser that supports CSS can use this feature.


A complete example:
Code: [ Select ]
<html>
<head>
<title>Placeholder Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
  jQuery.support.placeholder = false;
  test = document.createElement('input');
  if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
  if(!$.support.placeholder) {
   var active = document.activeElement;
   $(':text').focus(function () {
     if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
      $(this).val('').removeClass('hasPlaceholder');
     }
   }).blur(function () {
     if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
      $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
     }
   });
   $(':text').blur();
   $(active).focus();
   $('form:eq(0)').submit(function () {
     $(':text.hasPlaceholder').val('');
   });
  }
});
</script>
<style>
.hasPlaceholder {
  color: #777;
}
</style>
</head>
<body>
   <input type="text" name="search" placeholder="Search here..." /> 
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Placeholder Example</title>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5. <script>
  6. // This adds 'placeholder' to the items listed in the jQuery .support object.
  7. jQuery(function() {
  8.   jQuery.support.placeholder = false;
  9.   test = document.createElement('input');
  10.   if('placeholder' in test) jQuery.support.placeholder = true;
  11. });
  12. // This adds placeholder support to browsers that wouldn't otherwise support it.
  13. $(function() {
  14.   if(!$.support.placeholder) {
  15.    var active = document.activeElement;
  16.    $(':text').focus(function () {
  17.      if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
  18.       $(this).val('').removeClass('hasPlaceholder');
  19.      }
  20.    }).blur(function () {
  21.      if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
  22.       $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
  23.      }
  24.    });
  25.    $(':text').blur();
  26.    $(active).focus();
  27.    $('form:eq(0)').submit(function () {
  28.      $(':text.hasPlaceholder').val('');
  29.    });
  30.   }
  31. });
  32. </script>
  33. <style>
  34. .hasPlaceholder {
  35.   color: #777;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40.    <input type="text" name="search" placeholder="Search here..." /> 
  41. </body>
  42. </html>


Example: LINK

Hope this helps, enjoy.
Every job is a self-portrait of the person who did it: Autograph your work with excellence.

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 175 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.