How to show text outside input ONFOCUS?
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'"
开发者_StackOverflow中文版 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?
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...'"
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>
I would just put an empty div to the side, and have $("#hintdiv").innerHTML = 'Press enter to start searching'
in the onfocus
Use ids, div like answer above and function like
function MyOnFocusFunc() {
document.getElementById(yourinputid).value = '';
document.getElemenbById('hintdiv').innerHTML = 'Press enter to start searching';
}
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');
});
<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>
精彩评论