Cursor appear on search box click

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’ <?php echo $form->error(“keyword”); ?> $(‘#textBox’).focus(function() …

via HTML Language Development » Search Results » ajax:

Cursor appear on search box click

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’


error(“keyword”); ?>


…………………………..

This can be done with jQuery using the following method;
HTML;

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;
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;
Ensure you’ve got jQuery included, add this in the ….

…………………………..

A more generic approach (we do not need to have the watermark text in the JS):
Given the HTML element
And the following Javascript:
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.
…………………………..

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”;

}

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

try this:
HTML:
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 );
…………………………..

You can do this in html5 like this:
But support in IE is limited.
Or, you can do it with jquery very easily:
$(function()

$(“#search”).click(function()
$(this).val(“”);
);

});

For more info: Cursor appear on search box click

HTML Language Development » Search Results » ajax

Cursor appear on search box click

Share this post:

Related Posts

Leave a Comment