I am trying to implement a simple input mask js which will replace asterisks for any sensitive user data on the form like the social#. However, this might sound like a very stupid question, when i want to submit the form, i want to send the actual value of the textfield, the user entered. How do i go about doing that? I want to avoid submitting asterisks as the textfield value

function mask(str) {
    if(str.value!=null || str.value!="") {
        num = str.value.length;
        var masked = "";
        for(i=0; i<num; i++) {
            masked = masked + "*";
        }
    document.getElementById(str.id).value = masked;
    }
}

I am trying to implement a simple input mask js which will replace asterisks for any sensitive user data on the form like the social#. However, this might sound like a very stupid question, when i want to submit the form, i want to send the actual value of the textfield, the user entered. How do i go about doing that? I want to avoid submitting asterisks as the textfield value

function mask(str) {
    if(str.value!=null || str.value!="") {
        num = str.value.length;
        var masked = "";
        for(i=0; i<num; i++) {
            masked = masked + "*";
        }
    document.getElementById(str.id).value = masked;
    }
}

• javascript
• html

1 Answer 1

<input type="password" /> will do this for you automatically, no need to reinvent the wheel

Given your feedback, what about a middle-road? Keep the input box visible until text has been entered, then hide the input box when it loses focus and show a UI element to allow the user to bring the box back if needed.

Here's a quick proof-of-concept