Input Field iOS Safari Bug - Can't Type in Any Text

Input field iOS Safari bug — Can't type in any text

input { -webkit-user-select:text;}

this will solve the issue.

Why does Safari Mobile have trouble handling many input fields on iOS 8

Seems the issue is related to the number of text inputs which are part of the document or a form.

I "fixed" the issue by placing <form> tags around small groups of text inputs.

<form>
  <input type="text">
  <input type="text">
  <input type="text">
</form>

<form>
  <input type="text">
  <input type="text">
  <input type="text">
</form>

etc.

In some cases I had large tables with individual text fields in the <td> elements. You can't include <tr> or <td> elements in a form but rather must include the whole <table> or the content of individual <td> elements. In those cases I had to place a <form> element around each text input.

<table>
  <tr>
    <td>
      <form>
        <input type="text">
      </form>
    </td>
    <td>
      <form>
        <input type="text">
      </form>
    </td>
  </tr>
  etc....
</table>

text field not working in safari

Your problem lies in calcstyle.css here:

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

I'm not entirely sure why user-select: none; would prevent you from typing into an input but removing this block fixes it for me.

---

EDIT

Here is a possible solution:

Select everything but your inputs...

*:not(input.field) {    
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Cannot write into input field on safari

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

Keyboard doesn't show up when selecting input on iOS only

Try adding additional attribute for the touchstart event - ontouchstart, which executes the same javascript:

<input type="password" name="extLoginValidVO.password" maxlength="20" mandatory="true" autocomplete="off" 
       ontouchstart="this.removeAttribute('readonly');" 
       onfocus="this.removeAttribute('readonly');" 
       class="placeholder"
       id="password"
       readonly>

You might want to keep onfocus too, since it's needed for desktop browsers.
Here's the jsfiddle that I used: https://jsfiddle.net/u5g7t4c1/4/

---

Related Topics