Einfachste Möglichkeit, Zeichen in der HTML(5)-Texteingabe zu maskieren

Hat HTML5 irgendeine Art von Textfeldmaskierung oder muss ich trotzdem trappen onkeydown etc.?

jbabey hat recht – “maskieren” wie das Blockieren bestimmter illegaler Zeichen, nicht das Verbergen dessen, was eingegeben wird.

Der beste (wie am einfachsten und zuverlässigsten) Weg, den ich gefunden habe, ist zu trapen onkeyup und führen Sie dann einfach eine Regex-Ersetzung für den Wert des Textfelds aus und entfernen Sie alle illegalen Zeichen.

Dies hat einige Vorteile:

1. Es ist einfach zu implementieren (eine Funktion, zwei Codezeilen).
2. Es ist zuverlässig und deckt alle Fälle ab, an die ich gedacht habe.
3. Tastenbefehle wie Kopieren/Einfügen, Alle auswählen oder Pfeiltasten werden nicht blockiert.

Der größte Nachteil ist jedoch, dass die eingegebenen Zeichen kurz angezeigt werden, bevor sie entfernt werden, wodurch es sehr hackisch und unprofessionell aussieht.

Schau dir das Neue an HTML5-Eingabetypen. Diese weisen Browser an, eine clientseitige Filterung von Daten durchzuführen, aber die Implementierung ist in verschiedenen Browsern unvollständig. Das pattern Das Attribut filtert im Regex-Stil, aber Browser unterstützen dies wiederum nicht vollständig (oder überhaupt nicht).

Diese blockieren jedoch nicht die Eingabe selbst, sondern verhindern lediglich das Absenden des Formulars mit den ungültigen Daten. Du musst die immer noch fangen onkeydown -Ereignis, um die Tasteneingabe zu blockieren, bevor es auf dem Bildschirm angezeigt wird.

1. Eine grundlegende Validierung kann durch Auswahl von durchgeführt werden Typattribut von Eingabeelementen. Zum Beispiel:
   <input type="email" />
<input type="URL" />
<input type="number" />

2. verwenden Muster Attribut wie:
   <input type="text" pattern="[1-4]{5}" />

3. erforderlich Attribut
   <input type="text" required />

4. maximale Länge:
   <input type="text" maxlength="20" />

5. Minimal Maximal:
   <input type="number" min="1" max="4" />

Ja, laut HTML5-Entwürfen kann man das verwenden pattern -Attribut, um die zulässige Eingabe mithilfe eines regulären Ausdrucks anzugeben. Für einige Datentypen können Sie spezielle Eingabefelder verwenden, z <input type=email>. Aber diese Funktionen werden noch weitgehend nicht oder nur qualitativ schlecht unterstützt.

Etwas spät, aber ein nützliches Plugin, das tatsächlich eine Maske verwendet, um die Benutzereingabe etwas mehr einzuschränken.

<div class="col-sm-3 col-md-6 col-lg-4">
  <div class="form-group">
     <label for="addPhone">Phone Number *</label>
      <input id="addPhone" name="addPhone" type="text" class="form-control 
       required" data-mask="(999) 999-9999"placeholder>
    <span class="help-block">(999) 999-9999</span>
  </div>
</div>

 <!-- Input Mask -->
 <script src="https://stackoverflow.com/questions/10887645/js/plugins/jasny/jasny-bootstrap.min.js"></script>

Weitere Informationen zum Plugin https://www.jasny.net/bootstrap/2.3.1/javascript.html#inputmask

Verwenden Sie dieses JavaScript.

$(":input").inputmask();
$("#phone").inputmask({"mask": "(999) 999-9999"});