Fokus auf dem nächsten Formularelement mit picker

ich einige Formularelemente habe (4) und wenn ich fülle oder aktuelles Element auswählen, muss es nächstes Element konzentrieren, aber ich bin mit einiger jQuery-Plugin jquery pikaday und jquery flexdatalist mein erster Eingang hat Datalist, zweites und drittes Element hat datepicker und vierte Element hat Auswahlliste und meine Frage, wie kann ich nächste Element sie automatisch fokussieren, wenn sie füllen oder ausgewählt?Fokus auf dem nächsten Formularelement mit picker

$(document).ready(function() { 
 
    
 
    $('.flexdatalist').flexdatalist({ 
 
     minLength: 0, 
 
     searchContain:true, 
 
    }); 
 

 
    $(document).on('focus', '.checkin, .checkout', function() { 
 
    return new Pikaday({ 
 
     numberOfMonths: 2, 
 
     field: this, 
 
     format: "DD.MM.YYYY", 
 
     minDate: new Date(), 
 
     firstDay: 1, 
 
     maxDate: new Date(2020, 12, 31), 
 
     onSelect: function() { 
 
     e = this.getDate(); 
 
     } 
 
    }); 
 
    }); 
 
});

body { 
 
    padding: 30px; 
 
} 
 
input, 
 
select { 
 
    width: 100%; 
 
    padding: 10px; 
 
    border: 1px solid #ccc; 
 
}

<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" /> 
 
    <link rel="stylesheet" href="http://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.css" /> 
 
</head> 
 

 
<body> 
 

 

 
    <div class="container"> 
 

 

 
    <div class="row"> 
 

 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
 
     <input type="text" name="" class='flexdatalist' data-min-length='1' list='languages' name='language' /> 
 
     <datalist id="languages"> 
 
      <option value="PHP">PHP</option> 
 
      <option value="JavaScript">JavaScript</option> 
 
      <option value="Cobol">Cobol</option> 
 
      <option value="C#">C#</option> 
 
      <option value="C++">C++</option> 
 
      <option value="Java">Java</option> 
 
      <option value="Pascal">Pascal</option> 
 
      <option value="FORTRAN">FORTRAN</option> 
 
      <option value="Lisp">Lisp</option> 
 
      <option value="Swift">Swift</option> 
 
      <option value="ActionScript">ActionScript</option> 
 
     </div> 
 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
 
     <input type="text" class="checkin" /> 
 
     </div> 
 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
 

 
     <input type="text" class="checkout" /> 
 
     </div> 
 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
 

 
     <select name="select" id="select"> 
 
      <option value="0">Choose</option> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
      <option value="4">4</option> 
 
      <option value="5">5</option> 
 
      <option value="6">6</option> 
 
      <option value="7">7</option> 
 
     </select> 
 
     </div> 
 

 
    </div> 
 

 

 
    </div> 
 

 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script> 
 

 
    <script src="http://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.js"></script> 
 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

wie trivago

Quelle

2017-01-23 ani_css

Mögliche Duplikate von [mit Fokus auf nächste Eingabe (jquery)] (http://StackOverflow.com/Questions/10539113/Focusing-on-Next-Input-Jquery) –

Nein, die Frage ist über DatePicker und Datalist, wie kann Fokus wird bemerken, datepicker und datalist wurde ausgewählt sorry über meine englisch –

ich Ihren Code ein bisschen neu formatiert, da entscheidende JS die Skripte am Boden waren. Dies ist nur für pikadate Boxen auf den Fokus, ich ging nicht ins Detail für flexdatalist. Wie auch immer, das Problem, das du hattest, ist, dass du auf jeden Fokus von Datepickern neue zulegst, und damit bekommst du eine Maximum call stack size exceeded. ('StackOverflow' :) ist das nicht ironisch). Also in diesem Beispiel auf Dokument bereit, jedes Plugin wird separat der richtigen Box zugeordnet. Zusätzlich wird für das Hauptproblem beim Zuweisen eines Plugins eine zusätzliche Funktion als eine Funktion übergeben, die sagt, wie das nächste Kästchen auszuwählen ist, nachdem dieses geschlossen wurde. Dies wird erreicht, indem beim Vergeben des Plugins die Eigenschaft onClose verwendet wird. Auch wenn Sie hier keinen Parameter übergeben, wird kein Problem verursacht, da es behandelt wird.

Sie können jetzt die ähnliche Methode für flexdatalist verwenden, muss nur das richtige Attribut in der Plugin-Dokumentation finden (wie onClose wird auf pikadate verwendet).

<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" /> 
    <link rel="stylesheet" href="http://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script> 

    <script src="http://cdn.anitur.com.tr/example/flexdatalist/flexdatalist.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      $('.flexdatalist').flexdatalist({ 
       minLength: 0, 
       searchContain:true, 
       select: function() { 
        $('#checkin').focus(); 
       } 
      }); 

      var assignPicker = function (id, whenClosed) { 
       if (typeof whenClosed !== 'function') { 
        whenClosed = null; 
       } 

       return new Pikaday({ 
        numberOfMonths: 2, 
        field: document.getElementById(id), 
        format: "DD.MM.YYYY", 
        minDate: new Date(), 
        firstDay: 1, 
        maxDate: new Date(2020, 12, 31), 
        onSelect: function() { 
         e = this.getDate(); 
        }, 
        onClose: whenClosed 
       }); 
      } 

      assignPicker('checkin', function() { 
       $('#checkout').focus(); 
      }); 
      assignPicker('checkout', function() { 
       $('#select').focus(); 
      }); 

     }); 
    </script> 

    <style> 
     body { 
      padding: 30px; 
     } 
     input, 
     select { 
      width: 100%; 
      padding: 10px; 
      border: 1px solid #ccc; 
     } 
    </style> 

</head> 

<body> 


    <div class="container"> 


    <div class="row"> 

     <div class="col-lg-3 col-md-3 col-sm-3"> 
     <input type="text" name="" class='flexdatalist' data-min-length='1' list='languages' name='language' /> 
     <datalist id="languages"> 
      <option value="PHP">PHP</option> 
      <option value="JavaScript">JavaScript</option> 
      <option value="Cobol">Cobol</option> 
      <option value="C#">C#</option> 
      <option value="C++">C++</option> 
      <option value="Java">Java</option> 
      <option value="Pascal">Pascal</option> 
      <option value="FORTRAN">FORTRAN</option> 
      <option value="Lisp">Lisp</option> 
      <option value="Swift">Swift</option> 
      <option value="ActionScript">ActionScript</option> 
     </datalist> 
     </div> 
     <div class="col-lg-3 col-md-3 col-sm-3"> 
      <input type="text" class="checkin" id="checkin" /> 
     </div> 
     <div class="col-lg-3 col-md-3 col-sm-3"> 

      <input type="text" class="checkout" id="checkout" /> 
     </div> 
     <div class="col-lg-3 col-md-3 col-sm-3"> 

     <select name="select" id="select"> 
      <option value="0">Choose</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="6">6</option> 
      <option value="7">7</option> 
     </select> 
     </div> 

    </div> 


    </div> 




    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 

</html>

Edit: Hier ist ein kleines Update für die flexdatalist Box. Sie haben einige Ereignisse in der offiziellen documentation, aber nicht sicher, dass jeder von ihnen die Situation passt.

Zum Beispiel Sie change:flexdatalist wie so verwenden:

$('.flexdatalist').flexdatalist({ 
    minLength: 0, 
    searchContain:true, 
}).on('change:flexdatalist', function() { 
    $('#checkin').focus(); 
});

Aber das Problem hier, wie bei jedem anderen Fall, dass Sie passen kann, ist, dass die Ausbreitung des Schließens des Plugins erst nach diesem getan wird Veranstaltungen. Und dann würden Sie einen verketteten Closing-Befehl für alle Plugins erhalten, wenn sie nacheinander in einer Reihe von Ereignissen schließen. Was passiert hier und was passiert auch auf pikadate Plugin, wenn Sie versuchen, eine Fokus-Funktionalität in onSelect Handler setzen. Um dieses Problem zu lösen, würde ich eher empfehlen, ein anderes Plugin zu verwenden, das einen on-close-Handler hat, der sich erst verbreitet, nachdem das Plugin alles beendet hat (zumindest wie pikadate hat). Die andere Möglichkeit wäre, das Plugin zu erweitern, was ein bisschen mehr Arbeit sein kann.

Quelle

2017-01-23 08:19:46 Lesotto

Wenn Sie implizieren, um am Ende, dass nicht im Fokus zu wählen Box auswählen, das ist ein bisschen ein anderes Problem. Es ist ein wenig komplizierter, es mit JS zu erweitern. Sie könnten versuchen, die Antwort auf diese [Frage] (http://stackoverflow.com/questions/10453393/how-topen-the-select-input-using-jquery) zu folgen. aber für das, was ich sehe, ist es nicht die stabilste Lösung. Wenn Sie diese Auswahl wirklich öffnen müssen, gehen Sie möglicherweise einen anderen Weg, um zu versuchen, die Auswahlbox nachzuahmen (z. B. aus einem UL), oder verwenden Sie ein Plugin wie für die erste Box. – Lesotto

Nein Ich spreche über den ersten Eingabedatalist, wenn ich ein beliebiges Element auswähle, das ich nicht auf die nächste Eingabe fokussiere –

Fokus auf dem nächsten Formularelement mit picker

Antwort

Verwandte Themen