jQuery Password Generator

*** 30.04.2015 Update – Fixed JS library with datatype values (parseInt).
Ein kleiner Fehler wurde behoben beim Verhalten des Übergabewertes min und max value in der jquery Verarbeitung.
Demo und Sourcefiles geupdated ***

jQuery ist eine freie JavaScript Bibliothek welche Funktionen zur DOM Navigation und Manipulation bereit stellt.

Das jQuery Framework ist eine vereinfachte Form der JavaScript Programmierung, jQuery vereinfacht die Syntax.

Einsatzmöglichkeiten:

  • Möglichkeiten um auf Elemente auf der Website (DOM) zuzugreifen um das Aussehen zu ändern, Animationen oder Aktionen durchzuführen.
    Was bisher in JavaScript umständlich und unsicher über „getElementById“ und „getElementsBy…“ gemacht wurde, geht jetzt einfach und schnell über $(„#Feld-Id“) und $(„.Klassen-Name“).
    Bei dem auswählen der Elemente ist man sehr nahe an der Schreibweise wie bei CSS.
  • Das DOM zu manipulieren – sprich die ausgewählten Elemente ändern (Farbe, Positionen, Elemente ausblenden, CSS Zuweisungen, etc.)
  • Events: Je nachdem was der Nutzer macht kann man einfach mit jQuery darauf reagieren
  • Ajax ist schnell eingebaut und die Brücke zum Server ist da. Sprich, man kann je nach Benutzeraktion und Benutzereingabe dann vom Server Daten holen und damit weiterarbeiten wie z.B. bei einem Suchfeld Vorschläge einblenden

Unter folgendem Link gibt es eine Demo des jQuery Password Generators


Am Ende des Artikels findet ihr noch einen Download Link des gesamten Projektes mit entsprechender Stylesheet Datei, inklusive less File

In unserem Beispiel binden wir die jQuery Bibliothek über die Google-Apis ein.

Code:
Folgender Code zeigt das Grundgerüst in HTML/PHP:

<!DOCTYPE html>
<html>
    <head>
        <title>Pass Generator</title>

        <!-- STYLES -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">

        <!-- SCRIPTS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

        <!-- FONTS -->
        <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' >
      
        <!-- META -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">

  
    </head>
    <body>
      <h1><span class="fa fa-dashcube"></span> Pass Generator </h1>
      <p>
        <input type="checkbox" name="sonderzeichen" id="special_chars" value="yes" />
        <label for="special_chars">Special Chars</label>
      </p>
      <p>
        <input type="text" name="prefix" id="prefixchars" value="aZ" />
        <label for="prefixchars">Prefix Chars</label>
      </p>
      <p>
        <input type="number" id="length" min="5" max="50" value="10" />
        <label for="length">Characters</label>
      </p>
      <p>
        <input type="submit" id="generate" class="submit" value="Generieren" />
      </p>
      <p>
        <input type="text" id="txtpwout" class="out" readonly />
        <span id="alert"> </span>
      </p>
      <script type="text/javascript" src="js/func.js"></script> 
    </body>
</html>

Und nun die jQuery File womit wir das DOM manipulieren (func.js):

jQuery(function($) {

function randString(limit, prefix) {
    
    var password = '',
    possible,
    basic_chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', 
    special_chars = '!"#$%&()*+,-./:;<=>&lt;?@[\]^_{|}~';

    if ($('input[type=checkbox]').is(':checked')) {
        possible = basic_chars + special_chars;
    } else {
        possible = basic_chars;
    }
    
    limit = limit - prefix.length;
    
    for (var i = 0; i < limit; i++) {
        password += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    password = prefix + password;
    return password;
}

$('.submit').click(function () {
     value = $("#length").val();
    if (value <= $("#length").attr('max')) {
      $('#alert').hide();
      width = value * 10;
      prefix = $("#prefixchars").val();
      var action = this.id;
      $('.out').val(randString(value, prefix)).select();
      $('#txtpwout').css('width',width).show();
      } 
      else { 
        $('#txtpwout').hide();
        $('#alert').addClass('alert').text('Zeichenlimit überschritten ('+ value +')').show(); 
        }
  });
}); 

Abschließend gibt es hier das Projekt zum Download: Download als ZIP

  • Trackbacks geschlossen
  • Kommentare (0)
  1. Noch keine Kommentare vorhanden.

Sie müssen eingelogged sein um Kommentare schreiben zu können.