W przypadku aplikacji internetowej Building Prywatność jest bardzo ważna, podobnie jak użytkownicy formatu wprowadzają swoje dane.

Aby pomóc w tym, włożyłem bibliotekę jQuery, która pomoże maskować pola http: // igorescobar. github.io/jquery-mask-plugin/.

Wydaje mi się jednak mieć problemy z maskowaniem numerów ubezpieczenia społecznego. Na przykład format przechodzi ładnie 567-78-7890, ale nie mogę wymyślić, jak maskować lub ukryć te pierwsze cztery liczby ... jak * - -7890.

Mój HTML to tylko pole wejściowe

<input class='social' />

A dzięki tej wtyczce próbowałem go zamaskować jako

$('.social').mask('000-00-0000');

To tylko zapewnia formatowanie

$('.newsocial').mask('xxx-xx-0000');

To po prostu zastąpi liczby, które wszedł z X.

Założyłem też JSFiddle, aby pomóc http://jsfiddle.net/w2Sccqwy/1/

Każda pomoc byłaby cudowna!

Str.s. Nie mogę użyć pola hasła, ponieważ ostatnie cztery liczby muszą być pokazane użytkownikowi i nie mogę mieć więcej niż jednego pola. Jest to wymóg firmy. Nie mogę zmienić wymogu firmy tak bardzo, jak chcę.

15
zazvorniki 18 sierpień 2014, 19:48

6 odpowiedzi

Najlepsza odpowiedź

Dla każdego, kto może wpatrywać w tę przyszłość, udało mi się wymyślić rozwiązanie, które zamaskuje wszelkiego rodzaju pola i formatuj go bez bałaganu z inną wtyczką.

W HTML potrzebowałbyś dwóch wejść

<input class='number' />
<input class='value' />

A następnie umieść pole numeru na podstawie wartości

A potem w twoim javascript

 $('.value').on('keydown keyup mousedown mouseup', function() {
     var res = this.value, //grabs the value
         len = res.length, //grabs the length
         max = 9, //sets a max chars
         stars = len>0?len>1?len>2?len>3?len>4?'XXX-XX-':'XXX-X':'XXX-':'XX':'X':'', //this provides the masking and formatting
        result = stars+res.substring(5); //this is the result
     $(this).attr('maxlength', max); //setting the max length
    $(".number").val(result); //spits the value into the input
});

I JSFiddle dla tych, którzy chcieliby zobaczyć wynik. http://jsfiddle.net/gtom9tvl/

12
zazvorniki 19 sierpień 2014, 14:00

Jest to kod, którego przystosowałem się z czystej maski JavaScript na telefon z Maska telefoniczna JavaScript Pole tekstowe z regex. Stworzyłem Codepen tutaj http://codepen.io/anon/pen/lxwvov

function mask(o, f) {
    setTimeout(function () {
        var v = f(o.value);
        if (v != o.value) {
            o.value = v;
        }
    }, 1);
}

function mssn(v) {
    var r = v.replace(/\D/g,"");
    if (r.length > 9) {
        r = r.replace(/^(\d\d\d)(\d{2})(\d{0,4}).*/,"$1-$2-$3");
        return r;
    }
    else if (r.length > 4) {
        r = r.replace(/^(\d\d\d)(\d{2})(\d{0,4}).*/,"$1-$2-$3");
    }
    else if (r.length > 2) {
        r = r.replace(/^(\d\d\d)(\d{0,3})/,"$1-$2");
    }
    else {
        r = r.replace(/^(\d*)/, "$1");
    }
    return r;
}

Aby go użyć, dodaj Onblur i ONKEUP do pola wejściowego

<input type="text" value="" id="ssn" onkeyup="mask(this, mssn);" onblur="mask(this, mssn)">
2
Community 23 maj 2017, 12:34
$(".social, .newsocial").on("keydown keyup", function(e) {
    $(this).prop("value", function(i, o) {
        if (o.length < 7) {
          return o.replace(/\d/g,"*")
        }
    })
})

http://jsfiddle.net/w2Sccqwy/3/

1
guest271314 18 sierpień 2014, 16:12

Nadchodzę na to w 2020 r. Podczas niektórych badań interfejsu użytkownika UI / UX. To, co widzę, są teraz odmianami:

<input id='set1' type='password' maxLength='3' minLength='3'>
"-"
<input id='set2' type='password' maxLength='2' minLength='2'>
"-"
<input id='set3' type='text' maxLength='4' minLength='4' pattern='[0-9]*'>

Możesz także dodać inputmode='numeric', aby włączyć podkładkę typu opartego na mobilnym.

1
John Meade 27 luty 2020, 00:15

W przypadku, gdy kiedykolwiek przydarzy się innym, chciałem uzyskać tę pracę z modelem MVC i walidacja MVC z DataSanNotation. I nie mogłem użyć żadnej z wtyczek i biblioteki. Wreszcie był w stanie uzyskać tę pracę ze skryptem poniżej z zastrzeżeniem, że zamaskuje po karcie z pola zamiast maskowania w czasie wpisywania każdej postaci.

    $('#SSN').mask("999-99-9999", { placeholder: 'nnn-nn-nnnn' });
    var temp;
    var regxa = /^(\d{3}-?\d{2}-?\d{4})$/;
    $('#SSN').focusin(function () {
        $('#SSN').val(temp);
    });
    $('#SSN').on('blur', function () {
        temp = $('#SSN').val();
        if (regxa.test($('#SSN').val())) {
            $('#SSN').val("XXX-XX" + temp.slice(6));
        }
    });

Będziesz potrzebować odniesienia do maski jQuery i jQuery.

0
Vipul 13 wrzesień 2018, 20:30

To powinno działać.

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
  $scope.modelssn = '';
});

app.directive("ssnInput",function(){
    return {
        require:'ngModel',
        link: function(scop, elem, attr, ngModel){
            $(elem).mask("999-99-9999");
            var temp;
            var regxa = /^(\d{3}-?\d{2}-?\d{4})$/;
            $(elem).focusin(function(){
                $(elem).val(temp);
            });
            $(elem).on('blur',function(){
                temp = $(elem).val();
                if(regxa.test($(elem).val())){
                   $(elem).val("XXX-XX" + temp.slice(6));
               }
            });
        }
    }
});
<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdn.rawgit.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js"></script>
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    Enter SSN <input type="text" ng-model="modelssn" ssn-input >
    <p>Real SSN {{modelssn}} </p>
  </body>
</html>
-1
ideeps 28 czerwiec 2017, 18:12