CODEWITHSUNDEEP
htmlcsssafari
CapitanFindus
CapitanFindus

Reputation: 1526

Safari on MAC skipping input fields

I'm having a little problem on a form, which has two inputs fields, which indicates time ( format HH:mm ) that are really closer, something like this:

enter image description here

This is the HTML part

<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>

And this is the respective CSS part

.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;
}

The problem comes up, only on Safari, when i click on the first input of these ( hours ), it automatically focuses the second one ( minutes ). The only way to write on hours input field is by using TAB key on keyboard, which obviously isn't the best solution.

On Chrome, Firefox and IE ( 9+, Edge too ) works fine, only Safari has this behaviour. Could it be a webkit bug? I've read about this "autofocus" by Safari, but only on mobile, not on desktop

Upvotes: 0

Views: 1699

Answers (2)

user1448926
user1448926

Reputation: 429

Actually, Safari is wrong here with respect to the HTML5 standard: https://www.w3.org/TR/html5/forms.html#the-label-element

If the for attribute is not specified, but the label element has a labelable element descendant, then the first such descendant in tree order is the label element’s labeled control.

If a label element has interactive content other than its labeled control, the activation behavior of the label element for events targeted at those interactive content descendants and any descendants of those must be to do nothing.

It should behave like all other browsers do. This is a Safari bug that is still present in iOS 11.3.

Upvotes: 1

Shaggy
Shaggy

Reputation: 6796

Your HTML is invalid; the label element can only contain, at most, one form element. Given that the HTML is invalid, each browser is attempting to somehow provide focus to one of the input elements, it just so happens that Chrome, Firefox & Internet Explorer/Edge end up providing focus to the same one, the first one. Safari is either providing focus to the last input or each input in succession.

The "solution" therefore is to rewrite your HTML so that each label is only associated with one input.

Upvotes: 2

Related Questions