用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-過濾器：模糊。使用真實模糊效果可以更容易地完成。

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/

編輯：添加錯誤報告/驗證擺弄