jQuery myPass – password hiding iPhone-Style

nicePass - jQuery Plugin

About

Neulich abend saß ich auf dem Sofa und wollte mich über mein iPhone bei Facebook anmelden, bei der Eingabe meines Passwortes fiel mir wieder dieses kleine Detail auf, welches die Eingabe des Passwortes doch etwas angenehmer macht.

Der ein oder andere iPhone-Besitzer weiß wovon ich rede. Davon das im Eingabefeld immer für kurze Zeit der zuletzt eingegeben Buchstabe des Passworts zu sehen ist, was dem User doch mehr Sicherheit gibt das seine Eingabe korrekt war.

Ich dachte mir sowas könnte auch für normale Formulare ganz schön sein und deshalb haben wir ein kleines jQuery-Plugin geschrieben welches dieses Verhalten imitiert.

How to use

jQuery myPass nutzt die jQuery Javascript library.

Ihr müsst nur die beiden Dateien in eueren Header einbinden.

?View Code JAVASCRIPT
1
2
<script src="_js/jquery.js" type="text/javascript"></script>
<script src="_js/jquery.myPass-1.0.js" type="text/javascript"></script>

Options

Um das Plugin zu aktivieren und einzustellen müsst Ihr nun nur noch folgendes in euren Header schreiben

?View Code JAVASCRIPT
1
2
3
4
5
	$('.myTextField').myPass({
			charReplace : '%u2665',
			charDuration : 1000
 
	});
  • charReplace: Hiermit könnt Ihr einstellen durch welches Zeichen die Buchstaben ersetzt werden sollen.Als default ist der Standard-Punkt eingestellt. Weitere Zeichen findet Ihr hier.Nehmt einfach die letzten 4 Zahlen des Unicode und setzt %u davor. z.B. charReplace : ‘%u2665′ um statt dem • ein ♥ zu verwenden.
  • charDuration: Hiermit könnt Ihr einstellen wie lange das letzte Zeichen angezeigt werden soll.

HTML

Im HTML-Teil eurer Seite legt Ihr nun einfach ein ganz normales Textfeld an, gebt diesem einen Namen und die Klasse welche Ihr oben eingetragen habt.

In diesem fall .myTextField.

?View Code JAVASCRIPT
1
2
3
4
<form action="test.php" method="post">
<input class="myTextField" name="password" type="text" />
<input name="Send" type="submit" value="submit" />
</form>

Nach dem senden des Formulars könnt Ihr eure Daten ganz einfach z.B. über PHP verarbeiten.

1
echo $_POST['password'];

Download & Demo

Demonstration – Plugin in Action

Download – Alle Dateien zum Download

http://www.mysrc.de/wp-content/plugins/sociofluid/images/twitter_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/google_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/delicious_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/digg_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/reddit_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/dzone_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/blinklist_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/blogmarks_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/furl_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/newsvine_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/technorati_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/magnolia_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/myspace_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/facebook_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.mysrc.de/wp-content/plugins/sociofluid/images/sphinn_48.png

Ähnliche Artikel

7 Responses to “jQuery myPass – password hiding iPhone-Style”

  1. NiKo  on Juli 4th, 2009

    Very nice, but may I suggest you that the input degrades to a input[type=password] rather than a text one?

    You can clone an input[type=password] to be able to retrieve its value, something like that: http://fr.pastebin.ca/1474004

  2. ahayek  on Dezember 17th, 2009

    Hello,

    I added defaultPassword support if someone wants to initialize the password field with a default value.
    use :

    JS code

    (function(){
    $j.fn.myPass = function(options) {

    var defaults = {
    charReplace : ‘%u25CF’,
    charDuration : 1000
    }

    var opts = $j.extend(defaults, options);
    var aktiv = null;

    $j(this).each(function(){
    tempField = $j(this).attr(‘name’);
    $j(this).attr(‘name’,'tmp_’+tempField);
    var defaultPassword = $j(this).val();
    var hiddenPass = “”;
    if(defaultPassword != ”) {
    for (i=0; i<=defaultPassword.length-1; ++i){
    hiddenPass = hiddenPass + unescape(opts.charReplace);
    }
    }
    $j(this).val(hiddenPass);
    $j(this).parent().append('’);
    });

    $j(this).bind(“keypress”, function(evt) {
    clearTimeout(aktiv);
    var hiddenPass = ”;
    var currentValue = $j(this).val();
    if(currentValue.length > 0){
    if(evt.which == 8){
    deleteLast(this);
    }else{
    currentValue = currentValue + $j(this).val().slice($j(this).val().length – 1);
    for (i=0; i<=$j(this).val().length-1; ++i){
    hiddenPass = hiddenPass + unescape(opts.charReplace);
    }
    lastLetter = $j(this).val().charAt($j(this).val().length-1);
    if(lastLetter != unescape(opts.charReplace)){
    saveString(lastLetter,this);
    }
    $j(this).val(hiddenPass);
    aktiv = setTimeout("hideAll('" + $j(this).attr('name') + "')", opts.charDuration);
    }
    }else{
    currentValue = $j(this).val();
    var tempField = $j(this).attr('name');
    var hiddenID = tempField.substr(tempField.indexOf('_')+1);
    $j('#'+hiddenID).val('');
    }

    });

    hideAll = function(el){
    lastLetter = $j('input[name='+el+']').val().charAt($j('input[name='+el+']').val().length-1);
    var hiddenID = el.substr(el.indexOf('_')+1);
    var tmpstr = $j('#'+hiddenID).val();
    $j('#'+hiddenID).val(tmpstr + lastLetter);

    var hiddenPass = '';
    for (i=0; i<=$j('input[name='+el+']').val().length-1; ++i){
    hiddenPass = hiddenPass + unescape(opts.charReplace);
    }

    $j('input[name='+el+']').val(hiddenPass);
    }

    saveString = function(str,el){
    var tempField = $j(el).attr('name');
    var hiddenID = tempField.substr(tempField.indexOf('_')+1);

    var tmpstr = $j('#'+hiddenID).val();
    $j('#'+hiddenID).val(tmpstr + str);
    }

    deleteLast = function(el){
    var tempField = $j(el).attr('name');
    var hiddenID = tempField.substr(tempField.indexOf('_')+1);
    var tmpstr = $j('#'+hiddenID).val();
    var length = $j('#'+hiddenID).val().length;
    $j('#'+hiddenID).val(tmpstr.substring(0,length-1));
    }

    };

    })();

    Enjoy !!

  3. ahayek  on Dezember 17th, 2009

    dont forget autocomplete=”off” for all navigators !

  4. Cialis  on März 10th, 2010

    KBNjIG Excellent article, I will take note. Many thanks for the story!

  5. eli  on Mai 12th, 2014

    very good, I want to use from javascript, how can I get the password value, the input control has the symbol instead of the actual entry?


Kommentare