Solved

Hide SSN input and show only last 4 digits

Posted on 2012-04-03
5
3,405 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
[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
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

735 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