PDA

View Full Version : How do you empty an input when clicked - only once.



Apothem
Jul 6th, 2008, 05:11 PM
<input type="text" class="searchform" value="Search..." OnClick="if(searchvar == void) { this.value = ''; searchvar = 1; }" name="s" id="s"/>

I tried to do that, but when I clicked on the input, nothing happened. What I want is when I click on the input box, it'll clear the "Search..." only ONCE - so if I input another data and click on it, it won't be cleared.

Philip M
Jul 6th, 2008, 05:24 PM
<input type="text" name="s" id="s" class="searchform" value="Search..." onclick="if(s.value == 'Search...') {this.value = ''; searchvar = 1; }">


i raed a wlihe ago taht as lnog as the frsit and lsat lttesrs in a wrod are in the cerroct pcale msot of us wulod siltl be albe to raed bceause our barnis jsut looks at the frsit and lsat lttesrs.

Apothem
Jul 6th, 2008, 05:44 PM
But how would you make it so that it changes only once? Since if I were to retype "Search..." for some random reason and click on it, it'll be erased again. That might sound silly, but I blatantly want it to be erased once and no more - even IF you type in "Search..." again.

coothead
Jul 6th, 2008, 06:07 PM
Hi there Pykex,

try it like this...


<script type="text/javascript">
window.onload=function() {
var test=true;
document.getElementById('s').onfocus=function(){
if(test==true){
this.value='';
test=false;
}
}
}
</script>

<input type="text" value="Search..." id="s">


coothead

Apothem
Jul 6th, 2008, 06:21 PM
Thanks, but how would I be able to actually compact it all onto a "OnClick" function?

coothead
Jul 6th, 2008, 06:25 PM
Hi there Pykex,

sorry but I do not understand your question.
Could you elaborate?

coothead

Apothem
Jul 6th, 2008, 06:34 PM
Such that it becomes something like:

<input type="text" class="searchform" value="Search..." OnClick="if(searchvar == void) { this.value = ''; searchvar = 1; }" name="s" id="s"/> - which in this case, doesn't work.

coothead
Jul 6th, 2008, 06:42 PM
Hi there Pykex,

javascript, where possible, should be placed within the head section of the document.
This is the case here. There is no need for it to be placed within the element.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
window.onload=function() {
var test=true;
document.getElementById('s').onfocus=function(){
if(test==true){
this.value='';
test=false;
}
}
}
</script>

</head>
<body>

<form action="#">
<div>
<input type="text" value="Search..." id="s">
</div>
</form>

</body>
</html>

coothead

Philip M
Jul 6th, 2008, 07:02 PM
You must declare the variable searchvar first.


<script type = "text/javascript">
var searchvar = false;
</script>

<input type="text" name="s" id="s" class="searchform" value="Search..." onclick="if (!searchvar) {this.value = ''; searchvar = true}">