Seite 1 von 2 12
  1. #1
    No Adblocker!

    Mitglied seit
    18.08.2017
    Ort
    8km von Harburg
    Beiträge
    365

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

    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.
    Zitat Zitat von mcmarky Beitrag anzeigen
    RTX 2080 Ti, endlich eine richtige Karte für COD Black Ops 4 :D...


    •   Alt

      Anzeige
      Bitte einloggen, um diese Anzeige auszublenden.
       

  2. #2

    Mitglied seit
    30.07.2011
    Beiträge
    2.512

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

    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>

  3. #3
    No Adblocker!

    Mitglied seit
    18.08.2017
    Ort
    8km von Harburg
    Beiträge
    365

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

    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.
    Zitat Zitat von mcmarky Beitrag anzeigen
    RTX 2080 Ti, endlich eine richtige Karte für COD Black Ops 4 :D...


  4. #4

    Mitglied seit
    30.07.2011
    Beiträge
    2.512

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

    Zitat Zitat von BloodSteam Beitrag anzeigen
    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.

  5. #5
    Avatar von ZAM
    No Adblocker!

    Mitglied seit
    17.12.2008
    Ort
    Fürth
    Beiträge
    2.174

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

    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.
    Geändert von ZAM (12.06.2018 um 10:41 Uhr)
    Wartungsdrohne
    "Und wenn einer so ein Bug-Loch entdeckt, Granate rein!"
    ASRock X99 Extreme4 | i7-5820K @ 4,2 OC 1.24v | Crucial 4x4 GB DDR4-2400 | 3xSSD,2x2TB HDD | ZOTAC GTX 980 Ti AMP! Edition | ASUS Xonar DGX PCIe | be quiet! Straight Power 10-CM Modular | Fractal R5 Define

  6. #6
    No Adblocker!

    Mitglied seit
    18.08.2017
    Ort
    8km von Harburg
    Beiträge
    365

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

    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});
    Geändert von BloodSteam (13.06.2018 um 12:15 Uhr)
    Zitat Zitat von mcmarky Beitrag anzeigen
    RTX 2080 Ti, endlich eine richtige Karte für COD Black Ops 4 :D...


  7. #7
    Avatar von ZAM
    No Adblocker!

    Mitglied seit
    17.12.2008
    Ort
    Fürth
    Beiträge
    2.174

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

    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.
    Wartungsdrohne
    "Und wenn einer so ein Bug-Loch entdeckt, Granate rein!"
    ASRock X99 Extreme4 | i7-5820K @ 4,2 OC 1.24v | Crucial 4x4 GB DDR4-2400 | 3xSSD,2x2TB HDD | ZOTAC GTX 980 Ti AMP! Edition | ASUS Xonar DGX PCIe | be quiet! Straight Power 10-CM Modular | Fractal R5 Define

  8. #8
    No Adblocker!

    Mitglied seit
    18.08.2017
    Ort
    8km von Harburg
    Beiträge
    365

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

    Zitat Zitat von ZAM Beitrag anzeigen
    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
    Zitat Zitat von mcmarky Beitrag anzeigen
    RTX 2080 Ti, endlich eine richtige Karte für COD Black Ops 4 :D...


  9. #9
    Avatar von ZAM
    No Adblocker!

    Mitglied seit
    17.12.2008
    Ort
    Fürth
    Beiträge
    2.174

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

    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.
    Geändert von ZAM (13.06.2018 um 14:06 Uhr)
    Wartungsdrohne
    "Und wenn einer so ein Bug-Loch entdeckt, Granate rein!"
    ASRock X99 Extreme4 | i7-5820K @ 4,2 OC 1.24v | Crucial 4x4 GB DDR4-2400 | 3xSSD,2x2TB HDD | ZOTAC GTX 980 Ti AMP! Edition | ASUS Xonar DGX PCIe | be quiet! Straight Power 10-CM Modular | Fractal R5 Define

    •   Alt

      Anzeige
      Bitte einloggen, um diese Anzeige auszublenden.
       

  10. #10
    No Adblocker!

    Mitglied seit
    18.08.2017
    Ort
    8km von Harburg
    Beiträge
    365

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

    Zitat Zitat von ZAM Beitrag anzeigen
    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?
    Zitat Zitat von mcmarky Beitrag anzeigen
    RTX 2080 Ti, endlich eine richtige Karte für COD Black Ops 4 :D...


Seite 1 von 2 12

Ähnliche Themen

  1. Hilfe bei .html Frameset
    Von Hardcoreentertaiment im Forum Programmierung und Webdesign
    Antworten: 10
    Letzter Beitrag: 29.10.2009, 18:20
  2. Programm zum erstellen einer HTML - Help-Datei gesucht.
    Von Tony-S im Forum Programmierung und Webdesign
    Antworten: 8
    Letzter Beitrag: 25.08.2009, 11:59
  3. HTML lernen?
    Von jeod im Forum Programmierung und Webdesign
    Antworten: 23
    Letzter Beitrag: 21.05.2009, 10:21
  4. HTML Seite als Startseite anzeigen lassen
    Von roadgecko im Forum Programmierung und Webdesign
    Antworten: 1
    Letzter Beitrag: 14.05.2009, 19:06
  5. Suche kostenlosen HTML-Editor (WYSIWYG)
    Von HTS im Forum Programmierung und Webdesign
    Antworten: 15
    Letzter Beitrag: 02.12.2008, 13:03

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •