Cursor appear on search box click

Question

Just want some direction really.

Want my search box to have text inside, but when it is clicked, it clears it and allows the user to start typing.

How is this achieved? jQuery?

Anyone got any useful links or tips to do this?

Thanks:)

Update for 'jQuery'

<form action="process.php" method="POST">
<input type="text" name="keyword" value="Keyword or code" id="textBox"/>
<?php echo $form->error("keyword"); ?>
<input type="submit" value="Search" name="search" />
</form>

<script type="text/javascript">
$('#textBox').focus(function() { 
  if ($(this).val()==='Keyword or code') {
      $(this).val('');
  }
});
$('#textBox').blur(function() {
  if($(this).val()==='') {
      $(this).val('Keyword or code');
  }
});
</script>

Answer 1

A more generic approach (we do not need to have the watermark text in the JS):

Given the HTML element <input class="watermark" type="text" value="Text Here" />

And the following Javascript:

<script type="text/javascript">

$(document).ready( function () {
    $('input.watermark').focus( function () {
        var $this = $(this);
        if( !$this.data('watermark_value') || $this.data('watermark_value') === $this.val() ) {
            $this.data( 'watermark_value', $this.val() ).val( '' );
        }
    });
    $('input.watermark').blur( function () {
        var $this = $(this);
        if( $this.val() === '' ) {
            $this.val( $this.data('watermark_value') );
        }
    });
});

</script>

Then you can give any input the class watermark to get the effect.

This will store the original value of the input and make the input blank when first entered, if the field is left blank when focus is removed it'll put the original value back, if the user enters a value into the input then nothing will happen when they leave. If they later revisit the input and make it blank, then again the original value will be inserted.

Answer 2

jQuery isn't necessary - here's a simple plain Javascript solution.

You need to bind to the inputs onfocus event and restore your default with the onblur if it was left empty:

function initSearchBox() {
  var theInput = document.getElementById('idOfYourInputElement');

  // Clear out the input if it holds your default text
  if (theInput.value = "Your default text") {
    theInput.value = "";
  }
}

function blurSearchBox() {
   var theInput = document.getElementById('idOfYourInputElement');

   // Restore default text if it's empty
   if (theInput.value == "") {
       theInput.value = "Your default text";
   }
}

<input type='text' value="Your default text" onfocus="initSearchBox();" onblur="blurSearchBox();" />

Actually by this method, it's not really even necessary to getElementById() . You can probably just use this .

Answer 3

try this:

HTML:

<input id="searchBox" value=""/>

JQUERY:

var pre = $('#searchBox').val();
$('#searchBox').focus(function() {
        if($(this).val() != pre)
        $(this).val($(this).val());
        else 
            $(this).val('');
}).blur(function() {
    if ($(this).val() != null && $(this).val() != '') 
            $(this).val($(this).val());
    else 
            $(this).val(pre);
}).keyup(function() {
    if ($(this).val() == null || $(this).val() == '' || $(this).val() == undefined) 
            $(this).val(pre).blur(); // here the input box will lost cursor blink until you click again due to `blur()` function
});

Answer 4

You can do this in html5 like this:

<imput type="search" value="" placeholder="search here">

But support in IE is limited.

Or, you can do it with jquery very easily:

$(function() {

  $("#search").click(function() {
    $(this).val("");
  });

});

Answer 5

This can be done with jQuery using the following method;

HTML;

<input id="textBox" name="" type="text" value="text here" />

The jQuery;

$('#textBox').focus(function() { 
    if ($(this).val()==='text here') {
        $(this).val('');
    }
});
$('#textBox').blur(function() {
    if($(this).val()==='') {
        $(this).val('text here');
    }
});

This will remove the value of the text box if it is current "text here", then if the user clicks off the box and leaves it empty, it'll add the placeholder text back in. You could change the.focus to simply be a click function to remove any content, regardless of what's in there.

$('#textBox').click(function() { 
    $(this).val('');
});

Or you can just use some Javascript in the Input field in HTML like so;

<input type="text" value="Text here" onfocus="if(this.value=='Text here')this.value='';" onblur="if(this.value=='')this.value='Text here';" />

Again, this will only remove text on click if the value is "text here" and it'll add "Text here" back in if the user leaves the box empty. But you could adjust the onfocus to remove any content with;

<input type="text" value="Text here" onfocus="this.value='';" onblur="if(this.value=='')this.value='Text here';" />

Ensure you've got jQuery included, add this in the....

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Answer 6

You can just add placeholder="" into your input tag

<input type="text" placeholder="Keyword or code">

This will generate a watermark which goes away when you focus on it