Safari auf MAC Überspringen Eingabefelder

ich auf einem Formular ein kleines Problem habe, die zwei Eingänge Felder hat, die Zeit (Format HH: mm) gibt, die wirklich näher, so etwas sind:Safari auf MAC Überspringen Eingabefelder

diese

ist der HTML-Teil

<label> 
    <span>Hour*</span> 
    <input type="text" class="input-sm" ng-model="ev.date_mn" name="ev_date_mn" placeholder="00" maxlength="2" required/> 
    <span class="divider">:</span> 
    <input type="text" class="input-sm" ng-model="ev.date_hr" name="ev_date_hr" placeholder="00" maxlength="2" required/> 
</label>

Und das ist der jeweilige CSS Teil

.wrapper.crea-evento div.input-group div.input-section label > span { 
    width: 40%; 
} 

.wrapper.crea-evento div.input-group div.input-section label > span.divider { 
    width: auto; 
    margin: 0 5px; 
    float: right; 
} 

.wrapper.crea-evento div.input-group div.input-section input { 
    width: 50%; 
    float: right; 
} 

.wrapper.crea-evento div.input-group div.input-section input.input-sm { 
    width: 65px; 
}

Das Problem tritt auf, nur bei Safari, wenn ich auf die erste Eingabe dieser (Stunden) klicke, fokussiert es automatisch die zweite (Minuten). Die einzige Möglichkeit, Stunden in das Eingabefeld einzugeben, ist die Verwendung der Taste TAB auf der Tastatur, was offensichtlich nicht die beste Lösung ist.

Auf Chrome, Firefox und IE (9+, Edge auch) funktioniert gut, nur Safari hat dieses Verhalten. Könnte es ein webkit Bug sein? Ich habe über diesen "Autofokus" von Safari gelesen, aber nur auf Handy, nicht auf dem Desktop

Quelle

2016-08-05 CapitanFindus

Ihr HTML ist ungültig; Das Label-Element kann höchstens ein Formularelement enthalten. – Shaggy

@Shaggy Ja, ich dachte darüber nach, also warum funktioniert es auf FF, IE und Chrome? – CapitanFindus

Es funktioniert nicht; Da der HTML-Code ungültig ist, versucht jeder Browser irgendwie, den Fokus auf eines der "Eingabe" -Elemente zu legen. Es passiert einfach, dass Chrome, FF und IE den gleichen Fokus haben, der erste. Safari stellt entweder die letzte "Eingabe" oder jede "Eingabe" nacheinander zur Verfügung. Aber auch hier ist der Browser nicht das Problem, es ist das ungültige HTML. – Shaggy

Ihr HTML ist ungültig; Das Element label kann höchstens ein Formularelement enthalten. Angesichts der Tatsache, dass der HTML-Code ungültig ist, versucht jeder Browser, den Fokus auf eines der input Elemente zu legen, es passiert einfach, dass Chrome, Firefox & Internet Explorer/Edge am Ende den Fokus auf den gleichen gibt. Safari bietet entweder den Fokus auf die letzten input oder jede input in Folge.

Die "Lösung" ist daher, Ihr HTML neu zu schreiben, so dass jedes label nur mit einem input verknüpft ist.

Quelle

2016-08-05 13:48:18 Shaggy

Safari auf MAC Überspringen Eingabefelder

Antwort

Verwandte Themen