views:

35

answers:

2
        <td class="style4">
            <input type="text" ID="txtFirstName" runat="server" maxlength="50"
            class="DefaultTextbox" style="width:180px;" value="First Name" 
            onfocus="if(this.value=='First Name') {this.value = '';document.getElementById('spanFirstName').visible=false;}"
            onblur="if(this.value=='') this.value = 'First Name'"
            />
        </td>
        <td>
             <span id="spanFirstName">Should be less than 50 characters.</span>
        </td>

I want to do something like this

onfocus = "if(this.value=='First Name') 
{
    this.value = '';
    document.getElementById('spanFirstName').visible=false;
}"
onblur = "if(this.value=='') this.value = 'First Name'"
+1  A: 

I don't know asp.net but after looking at your code at this line:

document.getElementById('spanFirstName').visible=false;

I think it can be replaced with below line:

document.getElementById('spanFirstName').style.visibility='hidden';

Not sure, but that is how we do it, and that can be possibly the cause of the issue.

Thanks

Sarfraz
+1  A: 

I think you are looking for a TextBoxWatermark. Here is a nice one

Create Textbox Watermark Using CSS and JavaScript

For your code you can do like this

<script type='text/javascript'>
function HideSpan(elem)
{
    if ( elem.value == 'First Name' )
    {
     elem.value = '';
     document.getElementById("spanFirstName").style.visibility = 'hidden'; 
    } 
}

function SetText(elem)
{
    if ( elem.value == '' )
    {
     elem.value = 'First Name';
            document.getElementById("spanFirstName").style.visibility = 'visible';
    } 
}

</script>
<table>
<tr>
      <td class="style4">
            <input type="text" ID="txtFirstName" runat="server" maxlength="50"
            class="DefaultTextbox" style="width:180px;" value="First Name" 
            onfocus="HideSpan(this);" onblur="SetText(this);"
            />
        </td>
        <td>
             <span id="spanFirstName">Should be less than 50 characters.</span>
        </td>
</tr>
</table>
rahul