How to show text outside input ONFOCUS?

Question

I have a form like this:

<form action="search.php" class='search' method='GET'>
<input 
    type="text/submit"
    class="home_search_area"
    value="Search"
    name="search" 
    onblur="if(value=='') value = 'Search'" 
    onfocus="if(value=='Search') value = ''"
 /></form>

Now my form hides word "Search" on focus. I want to show text "Press enter to start searching" outside textarea onfocus. How can I do this?

Answer 1

add an element under the input field:

<div id="tips"></div>

add to the onfocus event:

onfocus="if(value=='Search') value = ''; document.getElementById('tips').innerHTML = 'Press enter...'"

Answer 2

Add a Second DIV or SPAN Element near the input element and give it an ID and show your text in that

<script>
function test(){
if(this.value=='Search'){
this.value = '';
document.getElementById("show").innerHTML = "Press enter to start searching";
}

}
</script>
<form action="search.php" class='search' method='GET'>
<input 
    type="text/submit"
    class="home_search_area"
    value="Search"
    name="search" 
    onblur="if(value=='') value = 'Search'" 
    onfocus="test(this);"
 />
<div id=show></div>
</form>

Answer 3

I would just put an empty div to the side, and have $("#hintdiv").innerHTML = 'Press enter to start searching' in the onfocus

Answer 4

Use ids, div like answer above and function like

function MyOnFocusFunc() {
    document.getElementById(yourinputid).value = '';
    document.getElemenbById('hintdiv').innerHTML = 'Press enter to start searching';
}

Answer 5

<span id="showtext"></span>
<form action="search.php" class='search' method='GET'>
<input 
type="text/submit"
class="home_search_area"
value="Search"
name="search"  
onfocus="document.getElementById('showtext').innerHTML = 'Press enter  to start searching'"
/></form>

Answer 6

Try this;

<form action="search.php" class='search' method='GET'>
<input 
    type="text/submit"
    class="home_search_area"
    value="Search"
    name="search" 
    onblur="if(value=='') value = 'Search'" 
    onfocus="if(value=='Search') value = ''"
    id="myInput"
 />
<div id="ShowThis" style="display:none;">Press enter to start searching</div>
</form>

Then Jquery

$('#myInput').focus( function() {
    $('#ShowThis').css('display','block');
});