Passwort-Maskierung in das Passwort-Feld mit jquery

Wie Passwort-Maskierung wie bei Android Handy so, wie wenn wir geben Sie einen Schlüssel zeigt es eine Taste für einige Sekunden, und ändern Sie ihn auf "*".
Ich habe versucht, das plugin erwähnt in Passwort-Maskierung als in Handys mit js ist es nicht optimal. Und das jsfiddle http://jsfiddle.net/medopal/X37Wz/ nicht in der Lage zu handhaben, backspace-und löschen. Könnten Sie bitte vorschlagen, andere Methoden, dies zu tun? Nur mit Hilfe von jquery und plugins.

Was ist der Grund, dass es auf non-mobile-Plattform?
Es ist für eine Applikation auf dem Handy.
wenn es auf dem desktop verwendet werden - es gibt keinen Grund in einem solchen Verhalten. Wenn es verwendet wird, auf mobilen Plattform - es wird automatisch maskiert.
Es ist nicht automatisch geschieht, müssen wir behandeln es mit jQuery.
es erfolgt automatisch durch mobile Browser. Verwenden Sie einfach die Eingabe password

InformationsquelleAutor Rajeswari | 2012-08-06

hier, ich habe getan, komplette Lösung bin für das oben beschriebene Abfrage. bitte überprüfen Sie die demo-link, wie unten angegeben:

Demo: http://codebins.com/bin/4ldqp8u

HTML:

<div id="panel">
  <input type="text" id="txtpwd" name="txtpwd" size="15"/>
  <input type="text" id="txthidden" name="txthidden" size="15"/>
  <div>
    KeyCode Pressed: 
    <span id="keycode">
    </span>
  </div>
</div>

JQuery:

$(function() {
    //Extends JQuery Methods to get current cursor postion in input text.
    //GET CURSOR POSITION
    jQuery.fn.getCursorPosition = function() {
        if (this.lengh == 0) return -1;
        return $(this).getSelectionStart();
    }

    jQuery.fn.getSelectionStart = function() {
        if (this.lengh == 0) return -1;
        input = this[0];

        var pos = input.value.length;

        if (input.createTextRange) {
            var r = document.selection.createRange().duplicate();
            r.moveEnd('character', input.value.length);
            if (r.text == '') pos = input.value.length;
            pos = input.value.lastIndexOf(r.text);
        } else if (typeof(input.selectionStart) != "undefined") pos = input.selectionStart;

        return pos;
    }

    //Bind Key Press event with password field    
    $("#txtpwd").keypress(function(e) {
        setTimeout(function() {
            maskPassword(e)
        }, 500);
    });

});

function generateStars(n) {
    var stars = '';
    for (var i = 0; i < n; i++) {
        stars += '*';
    }
    return stars;
}

function maskPassword(e) {

    var text = $('#txthidden').val().trim();
    var stars = $('#txthidden').val().trim().length;
    var unicode = e.keyCode ? e.keyCode : e.charCode;
    $("#keycode").html(unicode);

    //Get Current Cursor Position on Password Textbox
    var curPos = $("#txtpwd").getCursorPosition();
    var PwdLength = $("#txtpwd").val().trim().length;

    if (unicode != 9 && unicode != 13 && unicode != 37 && unicode != 40 && unicode != 37 && unicode != 39) {
        //If NOT <Back Space> OR <DEL> Then...
        if (unicode != 8 && unicode != 46) {
            text = text + String.fromCharCode(unicode);
            stars += 1;
        }
        //If Press <Back Space> Or <DEL> Then...
        else if ((unicode == 8 || unicode == 46) && stars != PwdLength) {
            stars -= 1;
            text = text.replace(text.charAt(curPos), "");
        }
        //Set New String on both input fields
        $('#txthidden').val(text);
        $('#txtpwd').val(generateStars(stars));
    }

}

Demo: http://codebins.com/bin/4ldqp8u

Danke. Aber wie Sie es handhaben, wenn wir löschen Sie ein Zeichen aus txtpwd? Ab sofort ist es nicht immer gelöscht, verstecktes Feld.
Hallo, haben Sie schon über den demo-link..? Es ist in Ordnung, wie deine Abfrage.
Wenn Sie Typ "123" in txtpwd input-element und Jetzt, Wie pro Ihre Abfrage, die ich eingestellt habe keypress-Ereignis auf txtpwd also, wenn Sie den cursor auf txtpwd nach dem ersten star-like "* | * * " und drücken Sie Löschen, dann werden Sie entfernt "2" von hidden-element mit dem Wert "13".
Gleiche wie für die Rücktaste, Jetzt Sie drücken Sie die Rücktaste "|" dann ist es entfernt die "1" von hidden-element mit dem Wert.
Hier habe ich über die Kontrollen, wenn der cursor sich in txtpwd vor dem ersten char, wie "|***" und drücken Sie die Rücktaste gleiche, als wenn cursor nach letztes Zeichen wie "***|" und drücken Sie die Entf-Taste, dann es nicht tun.

InformationsquelleAutor gaurang171

basierend auf keyur an codebins.com code von oben, dieses tolle kleine Antwort hier https://stackoverflow.com/a/4843500/1056285 und auch https://stackoverflow.com/a/1431109/1056285 (für die Rücktaste eigentlich löschen, ohne Fehler) die ich angepasst die Lösung berücksichtigt die Rücktaste auch!

$(function() {
    //Extends JQuery Methods to get current cursor postion in input text.
    //GET CURSOR POSITION
    jQuery.fn.getCursorPosition = function() {
        if (this.lengh == 0) return -1;
        return $(this).getSelectionStart();
    }

    jQuery.fn.getSelectionStart = function() {
        if (this.lengh == 0) return -1;
        input = this[0];

        var pos = input.value.length;

        if (input.createTextRange) {
            var r = document.selection.createRange().duplicate();
            r.moveEnd('character', input.value.length);
            if (r.text == '') pos = input.value.length;
            pos = input.value.lastIndexOf(r.text);
        } else if (typeof(input.selectionStart) != "undefined") pos = input.selectionStart;

        return pos;
    }

    //Bind Key Press event with password field    
    $("#txtpwd").keypress(function(e) {
        setTimeout(function() {
            maskPassword(e)
        }, 500);
    });

    $("#txtpwd").keydown(function(e) {
        if (e.keyCode == 8) {
            setTimeout(function() {
                maskPassword(e)
            }, 1);
        }
    });

});

function generateStars(n) {
    var stars = '';
    for (var i = 0; i < n; i++) {
        stars += '*';
    }
    return stars;
}

function maskPassword(e) {

    var text = $('#txthidden').val();
    var stars = $('#txthidden').val().length;
    var unicode = e.keyCode ? e.keyCode : e.charCode;
    $("#keycode").html(unicode);

    //Get Current Cursor Position on Password Textbox
    var curPos = $("#txtpwd").getCursorPosition();
    var PwdLength = $("#txtpwd").val().length;

    if (unicode != 9 && unicode != 13 && unicode != 37 && unicode != 40 && unicode != 37 && unicode != 39) {
        //If NOT <Back Space> OR <DEL> Then...
        if (unicode != 8 && unicode != 46) {
            text = text + String.fromCharCode(unicode);
            stars += 1;
        }
        //If Press <Back Space> Or <DEL> Then...
        else if ((unicode == 8 || unicode == 46) && stars != PwdLength) {
            stars -= 1;
            text = text.substr(0, curPos) + text.substr(curPos + 1);
        }
        //Set New String on both input fields
        $('#txthidden').val(text);
        $('#txtpwd').val(generateStars(stars));
    }

}

Können Sie einen Blick unter:
http://codebins.com/bin/4ldqp8u/38

Während dieser Zusammenhang kann eine Antwort auf die Frage, ist es besser, die wesentlichen Teile der Antwort hier und geben Sie den link zur Referenz. Link-nur Antworten können ungültig werden, wenn die verlinkten Seite ändert.
ich habe nicht den code, denn ich hatte einige Probleme mit der code-Formatierung und ich war zu faul, um zu sehen, was falsch ist. Aber ich dachte, es und jetzt füge ich den code zu. Danke für die Anregung 🙂
Diese fast gearbeitet, aber der funktioniert nicht richtig, wenn Sie wählen Sie das gesamte Feld und drücken Sie "löschen". Ich fand dieses script, was besser funktioniert: sitepoint.com/better-passwords-1-the-masked-password-field.

InformationsquelleAutor Andrei Sandulescu

IE 10 dieses feature hat. Kann sein, manche kann man reißt es sich aus? 😐

Passwort-Maskierung in das Passwort-Feld mit jquery

Auch, schrieb ich ein einfaches snippet, basierend auf dieser hier, das sollte Ihnen den Einstieg auf die Codierung Ihrer eigenen.

EDIT: schauen Sie sich den code hier:

<form action="#" onclick="return false;">
<input type="text" id="pv" name="passval" value="password" /><br>
<input type="password" id="p" name="pass" value="passwordsd" /><br>
<button id="b">Show</button>
</form>
<script>
$("#b").mousedown(function(){
  $("#pv").val($("#p").val());
}).mouseup(function(){
  $("#pv").val("");
});
</script>

InformationsquelleAutor Prasanth

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.