OnFocus OnBlur with ASP.NET

Question

I really don't understand why this is being so hard for me to get working:

• http://jsfiddle.net/jp2code/qCExy/

It will eventually be going into an ASP.NET control, so I believe I need to pass Javascript the <textarea> control's ID.

It doesn't work.

So, in the jsFiddle, I tried using standard controls for First and Last names, but they don't work either.

EDIT:

I've been playing around with the jsFiddle, and it appears that my jsOnFocus is never called (alert never fires). However, I was able to run down a little script from someone else that makes the multiline textbox clear and reset - I just can't seem to find a way to call this from a javascript function:

  function jsOnFocus(obj) {
      alert("Inside the jsOnFocus.");
      if (obj.Value==obj.defaultValue)
          obj.Value="";
  }
  function jsOnBlur(obj) {
      if (obj.Value==="")
          obj.Value=obj.defaultValue;
  }

​ Here is the HTML.

  <table>
    <tr><td>Message:</td><td>&nbsp;</td></tr>
    <tr>
      <td>&nbsp;</td>
      <td>
        <textarea name="txtMsg" rows="6" cols="30"
          onfocus="if(this.value==this.defaultValue)this.value='';" 
          onblur="if(this.value==='')this.value=this.defaultValue;">[Write your message here or call my voice number at (555) 222-1234.]</textarea>
      </td>
    </tr>
    <tr>
      <td>Test1:</td>
        <td><input type="text" name="txtTest1" 
          onfocus="jsOnFocus(txtTest1)" 
          onblur="jsOnBlur(txtTest1)" value="Test1" /></td>
    </tr>
    <tr>
      <td>Test2:</td>
  <td><input type="text" name="txtTest2" 
          onfocus="if(this.value=='Test2'){this.value=''};" value="Test2" /></td>
    </tr>
    <tr>
      <td>Test3:</td>
        <td><input type="text" name="txtTest3" 
          onfocus="if(this.value==this.defaultValue)this.value='';" 
          onblur="if(this.value==='')this.value=this.defaultValue;" value="Test3" /></td>
    </tr>
  </table>​

"Message" works, but I'd like to get the code to running in a javascript that I can place in my "js" file and use on other objects.

"Test1" is an attempt to call the javascript, but it does not work.

"Test2" works, but it does not use the technique in "Message".

"Test3" works, and it does use the technique in "Message".

Does anyone see how to make this code work in the javascript instead of inline html?

jsFiddle Link: http://jsfiddle.net/jp2code/qCExy/10/

Answer 1

I played around a bit with your fiddle. I'm a newb when it comes to jsfiddle though so I did not dare to try to save my changes.

Anyway, there are a few things that keep the Test1 box from working. First of all, the script in the "JavaScript" block in the fiddle is added to the page like this (check by viewing source in the Result section):

<script type='text/javascript'>//<![CDATA[ 
    window.addEvent('load', function() {
        function jsOnFocus(obj) {
            alert("Inside the jsOnFocus.");
            if (obj.Value==obj.defaultValue)
                obj.Value="";
        }
        function jsOnBlur(obj) {
            if (obj.Value==="")
                obj.Value=obj.defaultValue;
        }
    });//]]>  
</script>

So your functions are not in a scope (for lack of a more precise term) where you can call them like you tried to do.

To fix this I added the script directly in the Html section inside as <script> block.

There was also a small issue with the javascript code itself. The value property is called value, not Value.

Also, I changed the onfocus and onblur attributes on the input to pass this to the functions. You can of course change it to pass an id if you want and then look up the control using the id. In that case make sure that the control has an id specified.

Anyway, here is the resulting code from the Html section of the fiddle:

<script type="text/jscript">
    function jsOnFocus(obj) {
        if (obj.value==obj.defaultValue)
            obj.value="";
    }
    function jsOnBlur(obj) {
        if (obj.value==="")
            obj.value=obj.defaultValue;
    }
</script>
<table>
  <tr><td>Message:</td><td>&nbsp;</td></tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <textarea name="txtMsg" rows="6" cols="30" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value==='')this.value=this.defaultValue;">[Write your message here or call my voice number at (555) 222-1234.]</textarea>
    </td>
  </tr>
  <tr>
    <td>Test1:</td>
      <td><input type="text" name="txtTest1" onfocus="jsOnFocus(this)" onblur="jsOnBlur(this)" value="Test1" /></td>
  </tr>
  <tr>
    <td>Test2:</td>
      <td><input type="text" name="txtTest2" onfocus="if(this.value=='Test2'){this.value=''};" value="Test2" /></td>
  </tr>
  <tr>
    <td>Test3:</td>
      <td><input type="text" name="txtTest3" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value==='')this.value=this.defaultValue;" value="Test3" /></td>
  </tr>
</table>

Answer 2

Code Behind:

            string strUserName = "User Name";
            string strPassword = "Password";

            txtUserName.Text = strUserName;
            txtPassword.Text = strPassword;

            txtPassword.Attributes.Add("onblur", "PasswordBlur(this, '" + strPassword + "');");
            txtUserName.Attributes.Add("onblur", "UserNameBlur(this, '" + strUserName + "');");

            txtUserName.Attributes.Add("onfocus", "UserNameFocus(this, '" + strUserName + "');");
            txtPassword.Attributes.Add("onfocus", "PasswordFocus(this, '" + strPassword + "');");

Java Script:

function UserNameBlur(txtElem, strUserName) {
    if (txtElem.value == '') txtElem.value = strUserName;
}
function PasswordBlur(txtElem, strPassword) {
    if (txtElem.value == '') txtElem.value = strPassword;
}
function UserNameFocus(txtElem, strUserName) {
    if (txtElem.value == strUserName) txtElem.value = '';
}
function PasswordFocus(txtElem, strPassword) {
    if (txtElem.value == strPassword) txtElem.value = '';
}