使用 jquery 更改 SSN 的数字

Question

我发现这个脚本可以隐藏 SSN 的数字。我也想通过切换按钮来完成模糊/焦点事件的作用（并且按钮上的文本也会改变）。我试图通过 Click 事件来做到这一点，但需要帮助。有人可以看看小提琴。

我还希望 HIDDEN 状态显示 SSN 的最后 4 位，而 VISIBLE 状态显示所有数字。

HTML
<form>
<input name="ssn" id="ssn" type="text">
<button id="submit">Show SSN</button>

jQuery          
var retrieveValue = function(ev){
    var $this = $(this),
        val = $this.data('value');

    if (val) {
        $this.val(val);
    }
},
hideValue = function(ev){
    var $this = $(this);

    $this.data('value', $this.val());
    $this.val($this.val().replace(/^\d{5}/, '*****'));
};

$('#ssn').focus(retrieveValue);

$('#ssn').blur(hideValue);

$("#submit").click(function () {
    // check the visibility of the next element in the DOM
    if ($(this).text("Hide SSN")) {
        $('#ssn').val(retrieveValue);
        } else {
       $('#ssn').val(hideValue);
       $('#submit').text("Show SSN");
    }
});

点击[这里] (http://jsfiddle.net/squirc77/wEwYz/)

Answer 1

有一种更简单的方法可以实现这一点，它涉及将 <input> 从文本切换到密码

JSFidlle 3 text fields

HTML

<input type="text" name="ssn1" id="ssn1" size="2" maxlength="3" style="text-align:center;" value="555">
&nbsp;
<input type="text" name="ssn2" id="ssn2" size="2" maxlength="2" style="text-align:center;" value="55">
&nbsp;
<input type="text" name="ssn3" id="ssn3" size="2" maxlength="4" style="text-align:center;" value="5555">
&nbsp;
<input type="button" id="ssn_button" value="Show/Hide SSN">

JS

$(document).ready(function(){
    // Page has loaded, hide SSN1 and SSN2
    $('#ssn1, #ssn2').attr({'type':'password'});

    // Listen for Focus on any three fields
    $('#ssn1, #ssn2, #ssn3').on('focus', function(){
        $('#ssn1, #ssn2').attr({'type':'text'});
    });

    // Listen for Blur on any three fields
    $('#ssn1, #ssn2, #ssn3').on('blur', function(){
        $('#ssn1, #ssn2').attr({'type':'password'});
    });

    // Show/Hide SSN click
    $('#ssn_button').on('click', function(){
        // Alternate SSN1 and SSN2 based on current SSN1 state
        if($('#ssn1').attr('type') == 'password'){
            $('#ssn1').attr({'type':'text'});
            $('#ssn2').attr({'type':'text'});
        }
        else{
            $('#ssn1').attr({'type':'password'});
            $('#ssn2').attr({'type':'password'});
        }
    });
});

只为你 OP :)

JSFiddle 1 text field

Answer 2

使用 Css -webkit-filter: 模糊。使用真正的模糊效果更容易完成。

jsfiddle

HTML：

<form>
    <input name="ssn" id="ssn" type="text" class="show"/>
    <button id="submit">Hide SSN</button>
</form>

CSS：

.blur{
    -webkit-filter: blur(2px);
    opacity: 0.5;
}

JS：

$('#submit').click(function(event){
    event.preventDefault();
    $("#ssn").toggleClass(function(){
        if($(this).attr('class')=='blur'){
            $('#submit').text("Hide SSN");
            return 'show';
        }else{
            $('#submit').text("Show SSN");
            return 'blur';
        }
    });
});

Answer 3

一个只接受数字的输入

var ssn = $('#ssn'), sub = $('#submit'), stored = ssn.val(), go;
//only if stored has value and button says show, store ssn and toggle
function vshow() {if (stored && go) { ssn.val(stored); cblur(); }};
function vhide() {
    if (!go) {//only if button says hide
        stored = ssn.val();//set stored
        if(stored) {//if stored has value
            if (stored.length>4) {//check length
                ssn.val(Array(stored.length-3).join('*')+stored.slice(-4));
                cblur();//toggle
            }
        }
    }
};
function cblur() {
    sub.text(sub.text()=='Show SSN'?'Hide SSN':'Show SSN');//toggle
    if (sub.text()=='Show SSN') { go=true; }//show
    else if (sub.text()=='Hide SSN') { go=false; }//hide
}
ssn.blur(function() { vhide(); })//on blur
.focus(function() { vshow(); })//on focus
.keyup(function() {
    if (ssn.val().match(new RegExp('[^0-9]','g'))) {//if non-digit present
        ssn.val(ssn.val().replace(/[^\d]+/g,''));//remove non-digit
    }
});
sub.on('click', function () {
    if (go) { vshow(); }//show
    else { vhide(); }//hide
    return false;//prevents default behavior / remove to get it back
});

做了一个小提琴：http://jsfiddle.net/filever10/G36E3/

编辑：为小提琴添加了错误报告/验证