• Hallo Gast, du kaufst gerne günstig ein und erfährst oft vor deinen Freunden von interessanten Angeboten? Dann kannst du dein Talent als Schnäppchenjäger jetzt zu Geld machen und anderen PCGH-Lesern beim Sparen helfen! Schau einfach mal rein - beim Test der Community Deals!

HTML / jQuery - Wie erlaube Ich nur a-z und 0-9 im Input?

fotoman

Volt-Modder(in)
Keine Ahnung, was bei Dir nicht funktioniert, wenn JQuery korrekt geladen wird.

Wenn ich den zweiten Link nehme, mir alle Kommentare durchlese und das dann zusammen bastele, führt das bei mir (ohne jegliche JQuery-Erfahrung) unter Win10 mit FF 60.0.1 und iOS 11.3 mit Safari (oder sie der döslige Browser dort heissen mag) zum gewünschten Ergebnis. Ich kann mit dem Beispiel nur Kleinbuchstaben eingeben oder (unter Windows) pasten. Das Pasten von "Hallo" führt zu "allo".

Die Erweiterung auf Zahlen, Umlaute usw. ist ja trivial, einfach die RegEx anpassen.

Dass Du im folgenden Beispiel den JQuery-Link austauschen musst, ist wohl offensichtlich. Ich halte sowas für Seiten aus meinem Heimnetz lieber lokal.

Genäß den Komentaren auf Stackoverflow sollte das auch mit Android funktionieren, der Akku meines Tablets ist gerade leer. Nutzt man "bind" anstatt ".on" (also den Text aus der ersten Antwort), dann klappt es zwar in iOS auch, der unerwünschte Buchstabe wird dann aber kurz angezeigt.

Code:
<HTML>
  <HEAD>
    <TITLE>
      Test
    </TITLE>
    <script type="text/javascript" src="../jquery/jquery-1.10.2.min.js"></script>
  </HEAD>

  <body>
    <input name="lorem" class="alphaonly">
    <script type="text/javascript">
    $(document).ready(function(){
      $('.alphaonly').on('input paste',function(){ 
          var node = $(this);
          node.val(node.val().replace(/[^a-z]/g,'') ); }
      );
    }); 
    </script>
  </body>
</HTML>
 
TE
B

BloodSteam

Guest
Damit Ich es richtig verstehe, es funktioniert nur wenn man submit oä. klickt?

Also mein Ziel ist es diese Zeichen da nicht zu "schreiben".
Wenn man jetzt "ÄÖÜ!)"($/!"=)(/" auf der Tastatur drückt, sollte im input nichts stehen.

Code:
<input type="text" name="uid" placeholder="Username">

  $("input[name=uid]").on('keyup paste',function(){
        var node = $(this);
        node.val(node.val().replace([a-z]));
  });

Also mein Jquery funktioniert normal.
 

fotoman

Volt-Modder(in)
Damit Ich es richtig verstehe, es funktioniert nur wenn man submit oä. klickt?
Nein, es werden die Events "input" (EINGABE per Tastatur) und "paste" (EINFÜGEN) abgefangen. Oder bei Dir anstatt "input" eher "keyup" (Taste loslassen).

Bei den Events findet die Überprüfung statt. Wenn dann (in meinem Beispiel) ein Zeichen nicht der RegEx entspricht wird es durch '' ersetzt, faktisch also gelöscht.

Warum nutzt Du "keyup" anstatt "input"? Damit wird das Zeichen kurz angezeigt und danach wieder gelöscht.

Das ".replace" in Deinem Beispiel ist falsch. Einfach mein KOMPLETTES .replace-Beispiel kopieren und die [a-z] durch [a-z0-9] ersetzen aber den Rest NICHT löschen.
 

ZAM

Wartungsdrohne
Teammitglied
Versuche es mal damit.


Code:
<input type="text" name="uid" placeholder="Username">
<script>
    Number.prototype.between = function(a, b) {       
        var iMin = Math.min.apply(Math, [a, b]), iMax = Math.max.apply(Math, [a, b]);        
        return this > iMin && this < iMax;
    };
    (function($, document) {
        $(document).on("keydown paste", 'input[name="uid"]', function(e) {        
            if ( e.type === "keydown" ) {
                var keyCode = e.which || e.keyCode;    
                if ( !keyCode.between(48, 57) && !keyCode.between(65, 90) ) {
                    return false;
                }
            }
            if ( e.type === "paste" ) {
                 var sPaste = (e.clipboardData || window.clipboardData || e.originalEvent.clipboardData).getData('text');
                if ( /[^a-z0-9]/.test(sPaste) ) {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                }
            }
        });
    } (jQuery||$, document));
 </script>

Kann man noch erweitern, wenn du bspw. Enter ( && keyCode != 13 ) zulassen möchtest.
 
Zuletzt bearbeitet:
TE
B

BloodSteam

Guest
Okay, Ich bekomme eine Antwort ob dieser Nutzer existiert oder nicht, schon mal gut.

Mein PHP, sagt nur "true" oder "false" nichts mehr.

So sieht mein Code aus, irgendwie funktioniert es nicht :(
Code:
$(document).ready( function() {
  var a = $(this);
  var b = a.val();

  $("input").focus(function(){
    $(this).parent("div").children("p").css("display", "block");
  });

  function userCheck(a){
    $("input").focus(function(){
      if(a == true){
        $(this).css("color", "green");
      }else{
        $(this).css("color", "red");
      }
    });
  }

  $("input[name=uid]").on("input paste",function(){
    var a = $(this);
    var b = a.val();
    var c = b.replace(/[^a-zA-Z0-9]/g,'');
    a.val(c);

      $.ajax({
        url: "/sys/test.sys.php",
        type: "POST",
        data: {uid:c},
        success: function(response){
          console.log(response);
          if(response == true){
            console.log("Username is free.");
            userCheck(true);
          }else{
            console.log("Username is taken.");
            userCheck(false);
          }
        }

      });
  });
});

Oder so:
Code:
success: function(response){
            userCheck(response);
}

@@@@@@@@@@@@@@@@@@@@@@@@
Okay hab's jetzt :)
Code:
  var a = $("input[name=uid]");
            if(response == true){
              a.css("border-color","green");
            }else{
              a.css("border-color","red");
            }

Okay hab's jetzt 2.0 :)
Code:
var a = $(".signup-form input[name=uid]");
            if(response == true){
              x = "green";
            }else{
              x = "red";
            }
            a.css({"border-color":x,"color":x});
 
Zuletzt bearbeitet:

ZAM

Wartungsdrohne
Teammitglied
Das da
Code:
success: function(response){
    userCheck(response);
}

kannst du in dem Fall sogar abkürzen.
Code:
success: userCheck

Den Ajax-Call würde ich noch mit einem Prüfcode absichern.
 

ZAM

Wartungsdrohne
Teammitglied
Nimm mal PDO mit prepared-Statements statt mysqli direkt und Entwickel ein eigenes Session-System statt dem IO-Killer PHP-Sessions. ;)

Die index.php-Dateien zum Verzeichnisschutz sparst du dir übrigens, indem der Server vernünftig konfiguriert ist mit "Options -Indexes"

Und auch die uid-Kontrolle kannst du mit preg_replace kontrollieren statt dem Sanitize filter.
 
Zuletzt bearbeitet:
TE
B

BloodSteam

Guest
Nimm mal PDO mit prepared-Statements statt mysqli direkt und Entwickel ein eigenes Session-System statt dem IO-Killer PHP-Sessions. ;)

Die index.php-Dateien zum Verzeichnisschutz sparst du dir übrigens, indem der Server vernünftig konfiguriert ist mit "Options -Indexes"

Und auch die uid-Kontrolle kannst du mit preg_replace kontrollieren statt dem Sanitize filter.

Danke, Ich mache es einfach aus Freude am coden :) Ich weiß nur nicht, wieso mein script.js bei geladeten Inhalten nicht mehr funktioniert.
Zb wenn Ich eine "profile.html" lade, funktionieren auf der Seite dann die script.js Funktionen nicht?
 

ZAM

Wartungsdrohne
Teammitglied
Du lädst das über die jQuery.load() Funktion, richtig?
Das Zeug kommt erst nach DomReady, der Browser erkennt hier nicht (mehr) die Verweise auf Scripte.

Zitat aus der jQuery-Doku: "[FONT=&quot]however, the scripts are stripped out prior to the DOM being updated, and thus are [/FONT]not[FONT=&quot] executed[/FONT]"
 
TE
B

BloodSteam

Guest
Du lädst das über die jQuery.load() Funktion, richtig?
Das Zeug kommt erst nach DomReady, der Browser erkennt hier nicht (mehr) die Verweise auf Scripte.

Zitat aus der jQuery-Doku: "[FONT="]however, the scripts are stripped out prior to the DOM being updated, and thus are [/FONT][/COLOR][I]not[/I][COLOR=#333333][FONT="] executed[/FONT]"

Wie kann Ich es dann beheben?
 

ZAM

Wartungsdrohne
Teammitglied
Notwendige Scripte separat anlegen, wie die Templates und dann mitladen, bspw. über jQuery.getScript()
 
Oben Unten