Solved

Hide SSN input and show only last 4 digits

Posted on 2012-04-03
5
3,199 Views
Last Modified: 2012-04-04
I have a classic ASP application.

There is a form that accepts SSN as input.

I want to show the last 4 digits only and still capture the full SSN value because I will use that for further processing.

I have used a hidden field to hold the value entered in the input text field and displaying the value in the SSN field as *****1111 for example.

It is working fine until here.

But, when a user hits backspace to correct number, the code acting crazy when the user holds down the backspace continuously to clear the field.

Please let me know if you have any better code or alternatives or solutions.
The following is my code

I have kept the hidden field as a regular text field for testing purpose.

<html>
<head>
<script type="text/javascript">
function hideinput(obj){
var v = obj.value;
var l = v.length;
var val='';
var evtobj=window.event? event : obj;
var unicode=evtobj.keyCode? evtobj.keyCode : evtobj.charCode;
var h = document.getElementById('htext');
var hv = h.value;
if (unicode == 8)
{
    if (l>=0)
        hv=hv.substr(0,hv.length-1)
}
else
{
hv+=v.charAt(l-1);
}
h.value=hv;
for(var i=0;i<l;i++)
{
if(i<5)
val+='*';
else
val+=v.charAt(i);
}
obj.value=val;
return true;
}
</script>
</head>
<body>
<form>
<input type="text" onkeyup="hideinput(this)"/>
<input type="text" id="htext"/>
</form>
</body>
</html>

Open in new window

0
Comment
Question by:spraocs
5 Comments
 
LVL 34

Assisted Solution

by:Paul MacDonald
Paul MacDonald earned 200 total points
ID: 37805877
You could break the field up into three inputs for the three sections of the SSN.  Make the first two "password" style, so they're masked.  Leave the last one as a normal input control.
0
 
LVL 28

Expert Comment

by:sammySeltzer
ID: 37807020
Why bother with javascrip?

Why not simply use this:

<input type="text" <%=="***-**-" + Right([YourSSN],4)%>">

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 300 total points
ID: 37807584
Following @paulmacd instruction : http://jsfiddle.net/RpRKM/
HTML code :
<input class="ssn" id="ssn1" name="ssn1" type="password" size="1" maxlength="7" onkeyup="if(this.value.length==7) document.getElementById('ssn2').focus();" /><input class="ssn" id="ssn2" name="ssn2" type="text" size="1" maxlength="4" />

Open in new window

a bit of CSS :
¿#ssn1 {
    border: none;
    border-top: orange 1px solid;
    padding-left: 4px;
    padding-bottom: 4px;
    border-left: orange 1px solid;
    padding-top: 4px;
    border-bottom: orange 1px solid;
}
#ssn2 {
    border: none;
    border-right: orange 1px solid;
    padding-right: 4px;
    border-top: orange 1px solid;
    padding-bottom: 4px;
    padding-top: 4px;
    border-bottom: orange 1px solid;
}

Open in new window

0
 
LVL 1

Author Closing Comment

by:spraocs
ID: 37809000
Thanks to @Paulmacd for the initial lead to the solution. I was going to try that and then I saw the code and the link from @leakim971, which made it very easy to figure out and customize the solution completely.
Thanks a lot!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37809020
You're welcome
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
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…

895 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now