Erlaube dem Benutzer, mehrere Formularfelder kontinuierlich zu füllen

Ich habe das folgende Feld in meinem Formular, wo ein Benutzer eine 10-stellige Nummer eingeben sollte.Erlaube dem Benutzer, mehrere Formularfelder kontinuierlich zu füllen

stelle ich die Zahl in drei separate Felder (3-3-4):

Phone: [_ _ _]-[_ _ _]-[_ _ _ _]

Code:

 <div id="phone-element" class="form-element"> 
     <input type="tel" size="3" name="phone1" id="phone1" maxlength="3" tabindex="3" pattern="[0-9]{3}" title="3 digit phone number. Eg.808" required=""> <span class="wc_sep">-</span> 
     <input type="tel" size="3" name="phone2" id="phone2" maxlength="3" tabindex="4" pattern="[0-9]{3}" title="3 digit phone number. Eg.789" required=""> <span class="wc_sep">-</span> 
     <input type="tel" size="4" name="phone3" id="phone3" tabindex="5" pattern="[0-9]{4}" maxlength="4" title="4 digit phone number. Eg.1374" required=""> 
     </div>

Aber zur Zeit zwischen jedem Feld, müssen die Benutzer ihre Maus platzieren im nächsten Feld, um weiterhin die Nummer einzugeben.

Wie kann ich es kontinuierlich machen?

Quelle

2016-08-10 rockyraw

Das Beste, was Sie hier zu tun ist, kann _one_ Eingabefeld verwenden; Benutzer wissen, wie diese funktionieren. Irgendwelche ausgefallenen JS-Sachen, die den Fokus von einem Feld zum nächsten springen lassen, verringern die Benutzerfreundlichkeit. Moderne Browser erlauben das Vorfüllen von Formularen mit Werten, die der Benutzer in seinen Einstellungen eingegeben hat; wenn du nach meiner Telefonnummer fragen würdest, aber dann ein solches Konstrukt benutzt hättest, das dies zum Scheitern bringen würde - das wäre ein UX-Fehler auch. Oder vielleicht habe ich die Telefonnummer copy & paste bereit - wieder müsste man mit JS durch viele Ringe springen, um mit solchen unnötig auseinander gerissenen Eingabefeldern richtig zu arbeiten. – CBroe

Ich denke, ich sollte darüber nachdenken. Ich denke nur, dass es auf diese Weise vielleicht "ordentlicher" ist und wird die Benutzer ermutigen, es zu füllen. Wie funktioniert das automatische Ausfüllen des Browsers? Wenn Sie meinen aktuellen Code testen, funktioniert AutoFill problemlos, obwohl alle drei Felder geteilt sind. Funktioniert es, weil die ID 'Telefon-Element' ist? Weil ich in der css/js keine Einstellung für diese ID habe, weiß ich nicht, warum der ProTogrammer es so nannte, es sei denn, es hat mit Auto-Fill zu tun. – rockyraw

Es gibt "normale" Autofill, basierend auf Daten, die zuvor in Formularfeldern mit demselben Namen eingegeben wurden; Anschließend erfolgt die automatische Füllung basierend auf den Browsereinstellungen (in denen Benutzer ihre persönlichen Daten wie Name, E-Mail, Telefon usw. eingeben können), wobei der Browser anhand der Feldnamen versucht, geeignete Felder für die Daten zu finden. (Google hat einige Informationen darüber, wie man dafür Felder benennt, https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=de) – CBroe

Dies kann mit jQuery durchgeführt werden, indem der length des eingegebenen Werts (bei Tastenbelegung) mit dem maxlength überprüft wird, den Sie an den Eingängen festgelegt haben. Wenn die length des Eingangswertes der maxlength des Eingangsübereinstimmt, dann focus die nächste Eingabe:

$(function() { 
 
    $('input[type="tel"]').keyup(function() { 
 
    if (this.value.length === this.maxLength) { 
 
     $(this).nextAll('input[type="tel"]').first().focus(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="phone-element" class="form-element"> 
 
    <input type="tel" size="3" name="phone1" id="phone1" maxlength="3" tabindex="3" pattern="[0-9]{3}" title="3 digit phone number. Eg.808" required=""> 
 
    <span class="wc_sep">-</span> 
 
    <input type="tel" size="3" name="phone2" id="phone2" maxlength="3" tabindex="4" pattern="[0-9]{3}" title="3 digit phone number. Eg.789" required=""> 
 
    <span class="wc_sep">-</span> 
 
    <input type="tel" size="4" name="phone3" id="phone3" tabindex="5" pattern="[0-9]{4}" maxlength="4" title="4 digit phone number. Eg.1374" required=""> 
 
</div>

Quelle

2016-08-10 21:20:39 APAD1

Sie müssen JavaScript verwenden.

Hängen Sie einen Ereignis-Listener an die Eingabeelemente unter keyup an. Wenn die Länge des Felds Ihrer vorgegebenen Länge entspricht, fügen Sie dem nächsten Eingabeelement den Fokus hinzu.

z.B.

var phone1 = document.getElementById('phone1'); 
phone1.addEventListener('keyup', function() { 
    if (phone1.value.length === 3) { 
     document.getElementById('phone2').focus(); 
    } 
});

Möglicherweise müssen Sie irgendwelchen Rand Fällen gerecht zu werden, dass Sie die UX ist glatt, um sicherzustellen, zu finden, aber das sollte Ihnen den Einstieg.

Quelle

2016-08-10 21:13:20 Stephen

könnten Sie verwenden jquery

<html> 
    <head> 
    <title></title> 
    <meta content=""> 
    <style></style> 
    <script type="text/javascript" src="jquery.js"></script> 
    </head> 
    <body> 
    <input type="text" name="" id="field1"> 
    <input type="text" name="" id="field2"> 
    <input type="text" name="" id="field3"> 

    <script type="text/javascript"> 
     $(function(){ 
     var field1 = $("#field1"); 
     var field2 = $("#field2"); 
     var field3 = $("#field3"); 
     field1.on("keyup", function(e){ 
      if(field1.val().length == 3) 
      { 
       field2.focus(); 
      } 
     }) 

     field2.on("keyup", function(e){ 
      if(field2.val().length == 3) 
      { 
       field3.focus(); 
      } 
     }) 
     }) 
    </script> 
    </body> 
</html>

Quelle

2016-08-10 21:36:44

Dies kann ziemlich vereinfacht werden ein wenig, kein Grund, unterschiedliche Ereignisse für jede einzelne Eingabe anzugeben. – APAD1

Erlaube dem Benutzer, mehrere Formularfelder kontinuierlich zu füllen

Antwort

Verwandte Themen