2 Replies Latest reply on Nov 3, 2008 1:37 PM by fober1

    Clear username and Password boxes

    TheScarecrow Level 1
      I have a username and password box that I want to clear onFocus or onClick... I have that set. Here is my question. How do I do it if they click off of it and have not entered a username and password to have the box use the default value.

      <script type="text/javascript">
      function clearUsernameFunction(ff, ffvalue) {
      if (ffvalue == "username") {
      ff.value = "";
      }
      }
      function clearPasswordFunction(ff, ffvalue) {
      if (ffvalue == "password") {
      ff.value = "";
      }
      }
      </script>

      <TD>
      <CFINPUT TYPE="text"
      NAME="LoginID"
      REQUIRED="Yes"
      MAXLENGTH="10"
      class="loginTextBoxBold"
      value="username"
      size="12px"
      onClick="clearUsernameFunction(this, this.value)"
      onFocus="clearUsernameFunction(this, this.value)"> </TD>
      </TR>
      <TR>
      <TD ALIGN="right">
      <span class="loginTextBold">Password: </span> </TD>
      <TD>
      <CFINPUT TYPE="password"
      NAME="LoginPassword"
      MESSAGE="Password is required!"
      REQUIRED="Yes"
      MAXLENGTH="10"
      class="loginTextBoxBold"
      value="password"
      size="12px"
      onClick="clearPasswordFunction(this, this.value)"
      onFocus="clearPasswordFunction(this, this.value)"> </TD>
      </TR>
        • 1. Re: Clear username and Password boxes
          Dan Bracuk Level 5
          a reset button would be a lot simpler.
          • 2. Re: Clear username and Password boxes
            fober1 Level 1
            hi,

            What you need is the onblur event (leaving the field). And I have also made the javascript functions generic so they can be used with any field.

            I'm not sure what you mean with the default value here.
            "... not entered a username and password to have the box use the default value..."
            But I expect you are not talking about the username and password of the customer (you should not include that un-encoded in the raw HTML of the page)

            Cheers,
            fober

            ===============================================

            <script type="text/javascript">
            function focusfield(object, field) {
            if (object.value == field)
            object.value='';
            }

            function clearfield(object, field) {
            if (object.value == '')
            object.value=field;
            }
            </script>

            Username: <INPUT TYPE="text"
            NAME="LoginID"
            REQUIRED="Yes"
            MAXLENGTH="10"
            class="loginTextBoxBold"
            value="username"
            size="12px"
            onClick= "focusfield(this, 'username')"
            onFocus= "focusfield(this, 'username')"
            onBlur= "clearfield(this, 'username')"
            ><br>

            Password: <INPUT TYPE="text"
            NAME="LoginPassword"
            MESSAGE="Password is required!"
            REQUIRED="Yes"
            MAXLENGTH="10"
            class="loginTextBoxBold"
            value="password"
            size="12px"
            onClick= "focusfield(this, 'password')"
            onFocus= "focusfield(this, 'password')"
            onBlur= "clearfield(this, 'password')"
            >