[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Hide SSN input and show only last 4 digits

Posted on 2012-04-03
5
Medium Priority
?
3,871 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 800 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 29

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 1200 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article discusses how to implement server side field validation and display customized error messages to the client.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…

656 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