Cannot write into input field on safari

Question

I have an input field that cannot be selected on my Iphone. I can click on the input but it is not focusing. The keyboard to write appears but when I write something into it nothing happens. Therefore I cannot fill out the input fields. Is something missing in my CSS?

<div class="container" v-if="user === null">
        <div class="input">
            <input type="text" v-model="username" placeholder="E-Mail">
        </div>
        <div class="input">
            <input type="password" @keyup.enter="authenticate" v-model="password" placeholder="Passwort">
        </div>
        <div class="buttons">
            <button @click="authenticate">Log In</button>
        </div>
    </div>

I did not modify anything. thats why i have no css. Is there something that should be added? — Silve2611, Apr 17 '18 at 23:40
https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8 ? — Roy J, Apr 17 '18 at 23:40
Which field are you writing to? What does `nothing happens` mean? What is expected? — shukshin.ivan, Apr 17 '18 at 23:43
Possible dup: https://stackoverflow.com/questions/20495827/text-field-not-working-in-safari — GlennG, Nov 16 '18 at 11:21

Silve2611 · Accepted Answer · 2022-06-02T14:38:54.063

16

I was an error on my site. The template I was using had a style.css with the following rules

* {
  user-select: none;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
}

I had to add the following for safari:

input, input:before, input:after {
  -webkit-user-select: initial;
  -khtml-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
}

edited Jun 02 '22 at 14:38

answered Apr 18 '18 at 13:31

Silve2611

2,198
2
34
55

3

This saved me! Thank you. I was getting very confused as all the other browsers behaved normally with user-select applied. – Michael Giovanni Pumo Aug 12 '21 at 12:15
1

GREAT! Saved my day! My textarea on iphone with cordova had a fuzzy behavior with this additonal css styles it worked fine on the iphone. – M. Fish Jun 02 '22 at 10:22

score 1 · Answer 2 · answered Apr 18 '18 at 01:30

1

Try to put your input nested in a form. This is better for validations and accessibility, and that might fix your issue as well.

Your login button should also be of the submit type. See that link: https://www.w3schools.com/html/html_forms.asp

answered Apr 18 '18 at 01:30

RomOne

2,065
17
29

Cannot write into input field on safari

2 Answers2

Linked