Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Improve on date place holder in JS

    Hi

    Can anyone help me with this small problem.

    The JS below works fine - but I would like to improve it.
    I would like to restrict user to inputting only numbers AND leave the date place holder (the /'s) in place when they type (like in a database - I can do this in VBA but not in JS)

    Can anyone advise please

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Test Form</title>
    <script language="javascript" type="text/javascript">
            function Focus(objname, markdatebirth) {
                obj = document.getElementById(objname);
                if (obj.value == markdatebirth) {
                    obj.value = "";
                    if (obj.value == "dd/mm/yyyy" || obj.value == "" || obj.value == null) {
                        obj.style.color = "black";
                    }
                }
            }
    
            function Blur(objname, markdatebirth) {
                obj = document.getElementById(objname);
                if (obj.value == "") {
                    obj.value = markdatebirth;
                 }
                else {
                }
                if (obj.value == "dd/mm/yyyy" || obj.value == "" || obj.value == null) {
                    obj.style.color = "gray";
                }
            }
        </script>
    </head>
    
    <body>
    
    <form id="form1" runat="server">
    	Add a date here
    	<asp:TextBox id="DateBox1" runat="server" onblur="Blur(this.id,'dd/mm/yyyy')" onfocus="Focus(this.id,'dd/mm/yyyy')" Width="85px">dd/mm/yyyy</asp:TextBox>
    	<br />
    	Add a date here
    	<asp:TextBox id="DateBox2" runat="server" onblur="Blur(this.id,'dd/mm/yyyy')" onfocus="Focus(this.id,'dd/mm/yyyy')" Width="85px">dd/mm/yyyy</asp:TextBox>
    	<br />
    	Add a date here
    	<asp:TextBox id="DateBox3" runat="server" onblur="Blur(this.id,'dd/mm/yyyy')" onfocus="Focus(this.id,'dd/mm/yyyy')" Width="85px">dd/mm/yyyy</asp:TextBox>
    	<br />
    </form>
    
    </body>
    
    </html>


    Thanks for looking

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    When you show code in the JS forum, please do not show ASP.NET source code.

    To show the *REAL* HTML, simply do this:
    -- Bring up the page in your browser
    -- Click on the VIEW menu of the browser
    -- Click on the SOURCE (or PAGE SOURCE) menu item

    Now you will be viewing the HTML as the browser sees it *AND* as we can help you with.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Anyway, what you want isn't *too* hard, but what do you do about backspace? cursor movement? using the MOUSE ONLY to paste a value into the field?

    If you would settle for (say) any cursor key RESETTING the entire field to start over, it's not hard. Probably could then even handle backspace (and maybe treat DELETE same as backspace).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Here's my attempt at doing as you asked.

    Notice the modern JavaScript (and placement thereof) in lieu of the old-style that your ASP.NET page used.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Test Form</title>
    <style type="text/css">
    input.datefield {
        font-family: 'courier new', monospaced;
        font-weight: bold;
    }
    </style>
    </head>
    
    <body>
    
    <form id="form1" >
    	Add a date here
    	<input class="datefield" name="DateBox1" value="dd/mm/yyyy" />
    	<br />
    	Add a date here
    	<input class="datefield" name="DateBox2" value="dd/mm/yyyy" />
    	<br />
    	Add a date here
    	<input class="datefield" name="DateBox3" value="dd/mm/yyyy" />
    	<br />
    </form>
    <script type="text/javascript">
    (
      function( )
      {
          var form = document.getElementById("form1"); // or document.forms[0]
    
          var inps = form.getElementsByTagName("input");
          for ( var i = 0; i < inps.length; ++i )
          {
              var inp = inps[i];
              if ( inp.className == "datefield" )
              {
                  inp.onkeydown = dateInput;
              }
          }
    
          function dateInput( evt )
          {
              this.style.backgroundColor = "transparent";
              var val = this.value;
              var oval = this.defaultValue;
              var keycode = ( evt == null ) ? window.event.charCode : evt.keyCode;
              // allow tab normally:
              if ( keycode == 9 ) { return true; } /* the only return true! */
    
              // handle backspace specially:
              if ( keycode == 8 || keycode == 46 ) /* backspace or delete */
              {
                  val = val.split("");
                  for ( var c = val.length-1; c >= 0; --c )
                  {
                      var ch = val[c];
                      if ( ch >= "0" && ch <= "9" )
                      {
                          val[c] = oval[c];
                          this.value = val.join("");
                          return false;
                      }
                  }
                  return false; // ignore 
     
              }    
              if ( keycode >= 37 && keycode <= 40 ) /* cursor keys */
              {
                  this.value = this.defaultValue; // reset!
                  return false;
              }
              // then check for digits
              var char = String.fromCharCode(keycode);
              if ( char >= "0" && char <= "9" )
              {
                  // replace first mdy character with the digit
                  this.value = val = val.replace( /[mdy]/, char );
                  // are we done with this field?
                  if ( (/[mdy]/).test( val ) ) { return false; } // no
    
                  // yes...so validate the date:
                  var parts = val.split("/");
                  var month = Number(parts[1]) - 1; // js months are 0 to 11
                  var day = Number(parts[0]);
                  var test = new Date( Number(parts[2]), month, day );
                  if ( test.getDate() != day || test.getMonth() != month ) 
                  {
                      // invalid date!
                      this.style.backgroundColor = "pink";
                      return false;
                  }  
                  // valid date! move to next field:
                  this.blur( );
                  return false;
              }
              // and just kill any other characters:
              return false;
    
          }
      }
    )();
    </script>
    </body>
    
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •