Passwortmaskierung im Passwortfeld mit jQuery

Question

Wie man eine Passwortmaskierung wie in einem Android-Mobilgerät realisiert, bei der beim Eintippen einer Taste für wenige Sekunden ein Zeichen angezeigt wird und dann zu "*" geändert wird. Ich habe das erwähnte Plugin in Passwortmaskierung wie in Mobilgeräten unter Verwendung von JS ausprobiert, es ist jedoch nicht optimal. Und der jsfiddle http://jsfiddle.net/medopal/X37Wz/ kann mit Backspace und Löschen nicht umgehen. Könnten Sie bitte andere Methoden vorschlagen, um dies zu erreichen? Nur unter Verwendung von jQuery und ohne Plugins.

Answer 1

Hier habe ich eine vollständige Lösung für die obige Abfrage erstellt. Bitte überprüfen Sie den Demo-Link wie unten angegeben:

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

HTML:

    KeyCode gedrückt: 

JQuery:

$(function() {
    //Erweitert JQuery-Methoden, um die aktuelle Cursorposition im Eingabetext zu erhalten.
    //AKTUELLE CURSOR POSITION ERHALTEN
    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;
    }

    //Binden der Tastendruckereignisse an das Passwortfeld    
    $("#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);

    //Aktuelle Cursorposition im Passwort-Textfeld abrufen
    var curPos = $("#txtpwd").getCursorPosition();
    var PwdLength = $("#txtpwd").val().trim().length;

    if (unicode != 9 && unicode != 13 && unicode != 37 && unicode != 40 && unicode != 37 && unicode != 39) {
        //Wenn NICHT  ODER  Dann...
        if (unicode != 8 && unicode != 46) {
            text = text + String.fromCharCode(unicode);
            stars += 1;
        }
        //Wenn  Oder  gedrückt wird...
        else if ((unicode == 8 || unicode == 46) && stars != PwdLength) {
            stars -= 1;
            text = text.replace(text.charAt(curPos), "");
        }
        //Neuen String in beiden Eingabefeldern festlegen
        $('#txthidden').val(text);
        $('#txtpwd').val(generateStars(stars));
    }

}

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

Answer 2

Basierend auf keyur bei codebins.com Code oben, diese großartige kleine Antwort hier https://stackoverflow.com/a/4843500/1056285 und auch https://stackoverflow.com/a/1431109/1056285 (um das Löschen mit der Rücktaste tatsächlich ohne Fehler zu ermöglichen) habe ich die Lösung angepasst, um auch die Rücktaste zu berücksichtigen!

$(function() {
    //Erweitert JQuery-Methoden, um die aktuelle Cursorposition im Eingabetext zu erhalten.
    //CURSORPOSITION ERHALTEN
    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;
    }

    //Binden des Key-Press-Ereignisses an das Passwortfeld    
    $("#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);

    //Aktuelle Cursorposition im Passwort-Textbox erhalten
    var curPos = $("#txtpwd").getCursorPosition();
    var PwdLength = $("#txtpwd").val().length;

    if (unicode != 9 && unicode != 13 && unicode != 37 && unicode != 40 && unicode != 37 && unicode != 39) {
        //Wenn NICHT  ODER  Dann...
        if (unicode != 8 && unicode != 46) {
            text = text + String.fromCharCode(unicode);
            stars += 1;
        }
        //Wenn  ODER  gedrückt wird...
        else if ((unicode == 8 || unicode == 46) && stars != PwdLength) {
            stars -= 1;
            text = text.substr(0, curPos) + text.substr(curPos + 1);
        }
        //Neuen String in beiden Eingabefeldern setzen
        $('#txthidden').val(text);
        $('#txtpwd').val(generateStars(stars));
    }

}

Sie können sich unten ansehen: http://codebins.com/bin/4ldqp8u/38

Answer 3

IE 10 hat diese Funktion. Vielleicht kann es jemand kopieren? :|

Außerdem habe ich einen einfachen Code-Schnipsel basierend auf diesem hier geschrieben, der Ihnen beim Programmieren Ihres eigenen Codes helfen sollte.

BEARBEITEN: Schau dir den Code hier an:

Anzeigen

$("#b").mousedown(function(){
  $("#pv").val($("#p").val());
}).mouseup(function(){
  $("#pv").val("");
});