Zado
asked on
Use one javascript script to affect all input fields
Hi,
I have the following code:
Thanks for any help
I have the following code:
<INPUT TYPE="TEXT" NAME="NC1" VALUE="Prefix" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">
<INPUT TYPE="TEXT" NAME="NC2" VALUE="Chart" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">
<INPUT TYPE="TEXT" NAME="NC3" VALUE="Suffix" onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">
So as you can see in every input there's repeated code:onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"
I have more than 100 input fields and instead using 'onfocus' 'onblur' in every input field, I want to make just one common class for it, I mean something like this:<script>
[proper code here needed]
onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue"
</script>
<INPUT TYPE="TEXT" NAME="NC1" VALUE="Prefix">
<INPUT TYPE="TEXT" NAME="NC2" VALUE="Chart">
<INPUT TYPE="TEXT" NAME="NC3" VALUE="Suffix">
Thanks for any help
ASKER
So I can't do it my way? Because that would be perfect for me. Your solution is some step forward, but it's not exactly what I wanted. Thanks for your help. Any other ideas are welcome.
You could have a script that is executed when the page is loaded that scans through the Document Object Model (DOM) and locates each input field. It could then add onfocus and onblur events for each.
Try something like:
<script language="javascript">
var elems = document.getElementsByTagName("input");
for (var idx = 0; idx != elems.length; ++idx)
{
elems[idx].onfocus = function() { if(this.value==this.defaultValue)this.value=''; }
elems[idx].onblur = function() { if(this.value=='')this.value=this.defaultValue; }
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Proculopsis, it works perfectly, exactly what I wanted, thanks!
It being even more friendlier:
<script type="text/javascript">
$(function(){
$("input").focus(function(){
if(($(this).val() == $(this)[0].defaultValue)) {
$(this).val('');
}
}).blur(function(){
if ($(this).val() == '') {
var defVal = $(this)[0].defaultValue;
$(this).val(defVal);
}
});
});
</script>
:
doh!
took our var definition as not required.
$(function(){
$("input").focus(function(){
if(($(this).val() == $(this)[0].defaultValue)) {
$(this).val('');
}
}).blur(function(){
if ($(this).val() == '') {
$(this).val($(this)[0].defaultValue);
}
});
});
ASKER
Sorry darren-w-, I should wait for other suggestions before accepting Proculopsis's comment. Thanks for your help.
Those stay inside the Tags.
What you CAN do, is take the "logic" part and put it in a method and call the method instead of having to repeat the code every time.
<script>
mymethod()
{
// code implementation goes here
}
</script>
.
.
.
<INPUT TYPE="TEXT" NAME="NC1" VALUE="Prefix" onfocus="MyMethod('myparam
etc
Why is this important? If at any point in time you want to change the behaviour, you only have to do it once, in just one location and the behaviour globally changes for all of them