einreicht mehr Tasten auf HTML-Formular - designierte eine Taste als Standard [Duplikat]

StackOverflow https://stackoverflow.com/questions/1963245

  •  21-09-2019
  •  | 
  •  

Frage

    

Diese Frage bereits eine Antwort hier:

    
            
  •              mehr Submit-Buttons in einem HTML-Formular                                      23 Antworten                          
    •     
    

Ich habe eine Form, die drei Tasten vorlegen muss, wie folgt: 

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

Die Tastenreihe ist eine Mischung aus einreichen, Reset- und JavaScript-Schaltflächen. Die Reihenfolge der Tasten ist Änderungen vorbehalten, aber auf jeden Fall auf die Schaltfläche Speichern bleibt zwischen zurück und nächsten Schaltflächen.

Das Problem hier ist, dass, wenn ein Benutzer trifft Enter , um das Formular abzuschicken, das post-Variable "COMMAND" enthält "Prev"; normal, da diese Taste legt die erste auf dem Formular. Ich möchte jedoch die Schaltfläche „Weiter“ ausgelöst werden, wenn der Benutzer das Formular über die einreicht Enter drücken. Es ist eine Art, wie es als Standard-Submit-Button einstellen, auch wenn es noch andere Tasten, bevor es.

War es hilfreich?

Lösung

Mein Vorschlag ist dieses Verhalten nicht kämpfen. Sie können die Reihenfolge mit Schwimmern effektiv verändern. Zum Beispiel: 

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

mit: 

#buttons { overflow: hidden; }
#buttons input { float: right; }

effektiv die Reihenfolge umkehren und damit die Schaltfläche „Weiter“ wird der Wert ausgelöst werden, indem eingeben zu treffen.

Diese Art der Technik wird viele Umstände abzudecken, ohne zu mehr Hacky JavaScript-Methoden zurückgreifen zu müssen.

Andere Tipps

Die erste Taste ist immer der Standard; es kann nicht geändert werden. Während Sie können versuchen, es zu reparieren, mit JavaScript, wird das Formular verhalten unerwartet in einem Browser ohne Scripting, und es gibt einige Usability / Zugänglichkeit Eckfällen um darüber nachzudenken. Zum Beispiel verknüpft der Code von Zoran versehentlich das Formular auf der Presse in einem <input type="button"> eingeben, die normalerweise nicht passieren würde, und nicht IE Verhalten Absenden des Formulars fangen für drücken Sie die Eingabetaste auf andere Nicht-Feldinhalt in der bilden. Also, wenn Sie mit diesem Skript und drücken Sie in einem <p> in Form auf einem Text klicken Sie auf Eingabe, wird die falsche Taste eingereicht werden ... besonders gefährlich, wenn, wie in diesem Beispiel angegeben, ist die eigentliche Standard-Schaltfläche ‚Löschen‘!

Mein Rat wäre, über die Verwendung von Skript Hacks neu zuzuweisen defaultness zu vergessen. Gehen Sie mit dem Fluss des Browsers und nur die Standardschaltfläche die erste Stelle setzen. Wenn Sie das Layout hacken können Sie die auf dem Bildschirm zu geben, um Sie wollen, dann können Sie es tun, indem Sie einen Dummy unsichtbar Taste zuerst in der Quelle, mit dem gleichen Namen / Wert wie die Taste, die Sie sein Standard wollen: 

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(Anmerkung:. Positionierung verwendet wird, um die Taste Off-Screen zu schieben, weil display: none und visibility: hidden haben Browser-variable Nebenwirkungen auf, ob die Schaltfläche als Standard genommen wird und ob es eingereicht)

Quick'n'Dirty Du könnte ein verstecktes Duplikat der Absende-Button erstellen, die verwendet werden sollen, wenn die Enter-Taste.

Beispiel CSS 

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

Beispiel HTML 

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

Wenn jemand jetzt Treffer in dem Formular eingeben, die (versteckte) Next-Taste wird als Einreicher verwendet werden.

Getestet auf IE9, Firefox, Chrome und Opera

Set type=submit auf die Schaltfläche Sie möchten Ausfall- und type=button auf andere Tasten sein. Nun in das unten stehende Formular Sie in allen möglichen Eingabefelder drücken Sie die Eingabetaste können, und die Render Taste funktioniert (trotz der Tatsache, ist es die zweite Schaltfläche in Form).

Beispiel: 

    <button id='close_button' class='btn btn-success'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            type=submit>             <!--  Here we use SUBMIT, not BUTTON -->
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

Getestet in FF24 und Chrome 35.

Wenn Sie mit jQuery, diese Lösung aus einer Bemerkung hier ist ziemlich glatt: 

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

Fügen Sie einfach class="default" auf die Schaltfläche Sie die Standardeinstellung sein soll. Es setzt eine versteckte Kopie dieser Taste direkt am Anfang des Formulars.

Ich bin wieder zu beleben, weil ich eine Nicht-JavaScript Art und Weise untersucht, dies zu tun. Ich war nicht in die Schlüssel Handler und die CSS-Positionierung Sachen verursacht wurde Tabulatorreihenfolge da CSS Neupositionierung bricht nicht Tab-Reihenfolge ändern.

ist meine Lösung auf die Antwort basierend auf https://stackoverflow.com/a/9491141 .

Die Lösung Quelle ist unten. tabindex ist, um die korrekte Registerkarte Verhalten der versteckten Taste verwendet wird, sowie Arie versteckt die Schaltfläche von Bildschirmleseprogrammen ausgelesen zu vermeiden, / von Hilfsmitteln identifiziert. 

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

1. Taste in DOM   2. Taste in DOM   3. Taste in DOM

Essentielle CSS für diese Lösung: 

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

Eine andere Lösung, mit jQuery: 

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

Dies sollte auf den folgenden Formen arbeiten, so dass „Update“ die Standard-Aktion: 

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

Neben: 

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

Diese Fallen die Enter-Taste nur dann, wenn ein Eingabefeld auf dem Formular den Fokus hat.

Sie sollen nicht Tasten mit dem gleichen Namen verwenden. Es ist schlimm Semantik. Stattdessen sollten Sie Ihre Backend ändern für verschiedene Namenswerte sein Set aussehen: 

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

Da ich weiß nicht, was Sprache, die Sie im Backend verwenden, werde ich Ihnen einige Pseudo-Code: 

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}

bobince-Lösung hat den Nachteil auf einen Knopf zu schaffen, die sein kann Tab -d über, aber ansonsten unbrauchbar. Dies kann zu Verwirrung für Tastaturbenutzer erstellen.

Eine andere Lösung ist es, die wenig bekannte form Attribut zu verwenden: 

<form>
    <input name="data" value="Form data here">
    <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
    <input type="submit" name="submit" value="Submit">
</form>

<form id="form2"></form>

Dies ist Standard-HTML-, aber leider nicht unterstützt, in Internet Explorer.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top