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

BloodSteam · 9. Juni 2018

Hallo,
wie erlaube Ich nur a-z und 0-9 im Input?
Ich hab paar Sachen gefunden jedoch kann Ich eh alle buchstaben rein spammen.

HTML input pattern Attribute

javascript - Allow text box only for letters using jQuery? - Stack Overflow

Beides funktioniert irgendwie nicht.

fotoman · 9. Juni 2018

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>

BloodSteam · 10. Juni 2018

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 · 10. Juni 2018

BloodSteam schrieb:
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 · 11. Juni 2018

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.

BloodSteam · 13. Juni 2018

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});

ZAM · 13. Juni 2018

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.

BloodSteam · 13. Juni 2018

ZAM schrieb:
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.

GitHub - G1K777/random

ZAM · 13. Juni 2018

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.

BloodSteam · 13. Juni 2018

ZAM schrieb:
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 · 14. Juni 2018

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]"

BloodSteam · 14. Juni 2018

ZAM schrieb:
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][I]not[/I][COLOR=#333333][FONT="] executed[/FONT]"

Wie kann Ich es dann beheben?

ZAM · 15. Juni 2018

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

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

BloodSteam

Guest

fotoman

Volt-Modder(in)

BloodSteam

Guest

fotoman

Volt-Modder(in)

ZAM

Inventar

BloodSteam

Guest

ZAM

Inventar

BloodSteam

Guest

ZAM

Inventar

BloodSteam

Guest

ZAM

Inventar

BloodSteam

Guest

ZAM

Inventar

Ähnliche Themen