watermark search box

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Are you using any sort of javascript libraries such as jQuery, Prototype, etc on your pages already ?
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

not at this time - javascript is a bit of a unknown to me im just getting started with it.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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>
  • ultimate11
  • Student
  • Student
  • ultimate11
  • Posts: 86

Post 3+ Months Ago

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
  • Posts: 1091
  • Loc: Same place you left me.

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 83 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.