[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 396
  • Last Modified:

How can the last character typed be tested for in OnKeyPress event.

I have a JavaScript function that is triggered by the OnKeyPress event of various fields.  The function takes two parameters, the ID of the field and the type of data (Soc Sec #, phone # or date) the field contains.  It then inserts hyphens or slashes in the appropriate places.  It works fine unless the user types in the hyphens and slashes themselves.  In this case the character is duplicated and the user has to back space them out. I would like to put a test in for these characters but when the OnKeyPress event is triggered the last character typed is not yet included in the value of the field.  If someone could tell me how to test for the last character typed I'd appreciate it.  My code is below.

function setFormat(Field, FieldType){
var obj = document.getElementById(Field);
var len = obj.value.length;
      switch (FieldType){
            case 'SSNO':
                  if((len == 3||len == 6))
                        obj.value += '-';
                  else
                        return;
            case 'Date':
                  if(len == 2||len == 5)
                        obj.value += '/';
                  else
                        return;
            case 'PhoneNumber':
                  if(len == 3)
                        obj.value += '-';
                  else
                        return;
      }
}
0
leskelly
Asked:
leskelly
  • 4
  • 3
1 Solution
 
jpontaniCommented:
Change the handler to the OnKeyUp event, that way it happens after the release the last key.  Also, it should check the last character to make sure it's not the hyphen or slash, then it will add it.

function setFormat(Field, FieldType){
      var obj = document.getElementById(Field);
      var len = obj.value.length;
      switch (FieldType) {
            case 'SSNO':
                  if((len == 3||len == 6) && obj.value.charAt(len-1) != "-")
                        obj.value += '-';
                  else
                        return;
            case 'Date':
                  if((len == 2||len == 5) && obj.value.charAt(len-1) != "/")
                        obj.value += '/';
                  else
                        return;
            case 'PhoneNumber':
                  if((len == 3) && obj.value.charAt(len-1) != "-")
                        obj.value += '-';
                  else
                        return;
    }
}
0
 
GwynforWebCommented:
this should be called off onkeypress not onkeyup, the technique I have shown stops the user backspacing to add a \ or -

<script>
function setFormat(Field, FieldType){
var obj = document.getElementById(Field);
var len = obj.value.length;
     obj.value=  obj.value.replace(/\D/g,'')
     switch (FieldType){
          case 'SSNO':obj.value=obj.value.replace(/^(\d{3})/,'$1-')
                      obj.value=obj.value.replace(/^(\d{3}-\d{3})(\d+)/,'$1-$2')
                      return
          case 'Date':obj.value=obj.value.replace(/^(\d{2})/,'$1\/')
                      obj.value=obj.value.replace(/^(\d{2}\/\d{3})(\d+)/,'$1\/$2')
                      return
          case 'PhoneNumber':obj.value=obj.value.replace(/^(\d{3})/,'$1-')
                             return
     }
}
</script>
<body>

<p><input type="text" id="snum1" name="SSNO"  onkeyup="setFormat('snum1','SSNO')">ssno<p>

<input type="text" id="date1" name="Date" onkeyup="setFormat('date1','Date')">date <p>

<p><input type="text" id="num1" name="PhoneNumber" onkeyup="setFormat('num1','PhoneNumber')">phone
</body>

0
 
leskellyAuthor Commented:
I'm afraid I didn't make myself clear.  I'm not trying to prevent the user from backspacing to add a / or -.  What I want to do is test for those characters so that, if a user types them in because they don't realize they will be added for them, they will be ignored.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
GwynforWebCommented:
try my code it is the a standard way of doing these problems, I think you will find it meets you needs
0
 
leskellyAuthor Commented:
GwynforWeb,

I tried your code and it worked except, for Social Security Numbers it is placing the second '-' one character further to the right then it should.  For dates it's the same thing the second '/' is one further to the right.  I'm sure it just takes a minor change to correct this but, as is obvious I don't know much about JavaScript.

Les
0
 
GwynforWebCommented:
is this it?

<script>
function setFormat(Field, FieldType){
var obj = document.getElementById(Field);
var len = obj.value.length;
     obj.value=  obj.value.replace(/\D/g,'')
     switch (FieldType){
          case 'SSNO':obj.value=obj.value.replace(/^(\d{3})/,'$1-')
                      obj.value=obj.value.replace(/^(\d{3}-\d{3})(\d+)/,'$1-$2')
                      return
          case 'Date':obj.value=obj.value.replace(/^(\d{2})/,'$1\/')
                      obj.value=obj.value.replace(/^(\d{2}\/\d{2})(\d+)/,'$1\/$2')
                      return
          case 'PhoneNumber':obj.value=obj.value.replace(/^(\d{2})/,'$1-')
                   return
     }
}
</script>

<body>
<p><input type="text" id="snum1" name="SSNO" onkeyup="setFormat('snum1','SSNO')">ssno</p>

<p><input type="text" id="date1" name="Date" onkeyup="setFormat('date1','Date')">date</p>

<p><input type="text" id="num1" name="PhoneNumber"  onkeyup="setFormat('num1','PhoneNumber')">phone </p>
</body>
0
 
GwynforWebCommented:
sorry I changed the wrong ones

<script>
function setFormat(Field, FieldType){
var obj = document.getElementById(Field);
var len = obj.value.length;
     obj.value=  obj.value.replace(/\D/g,'')
     switch (FieldType){
          case 'SSNO':obj.value=obj.value.replace(/^(\d{3})/,'$1-')
                      obj.value=obj.value.replace(/^(\d{3}-\d{2})(\d+)/,'$1-$2')
                      return
          case 'Date':obj.value=obj.value.replace(/^(\d{2})/,'$1\/')
                      obj.value=obj.value.replace(/^(\d{2}\/\d{2})(\d+)/,'$1\/$2')
                      return
          case 'PhoneNumber':obj.value=obj.value.replace(/^(\d{3})/,'$1-')
                   return
     }
}
</script>

<body>
<p><input type="text" id="snum1" name="SSNO" onkeyup="setFormat('snum1','SSNO')">ssno</p>

<p><input type="text" id="date1" name="Date" onkeyup="setFormat('date1','Date')">date</p>

<p><input type="text" id="num1" name="PhoneNumber" onkeyup="setFormat('num1','PhoneNumber')">phone
</body>
0
 
leskellyAuthor Commented:
GwynforWeb

That did the trick.  Thanks for your assistance.

Les
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now