[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2004-10-27
8
Medium Priority
?
385 Views
Last Modified: 2013-12-03
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
Comment
Question by:leskelly
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 5

Expert Comment

by:jpontani
ID: 12427064
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12427249
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
 

Author Comment

by:leskelly
ID: 12427343
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 31

Expert Comment

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

Author Comment

by:leskelly
ID: 12427691
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
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 12427866
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
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 500 total points
ID: 12428049
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
 

Author Comment

by:leskelly
ID: 12437495
GwynforWeb

That did the trick.  Thanks for your assistance.

Les
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question