1. Remove the default rounded corners and inner shadows for input in iOS

IOS input will have its own rounded corner and inner shadow, remove the method as follows:

input{
	-webkit-appearance: none;
	border-radius: 0;
}
Copy the code

2. Focus in input, placeholder not hidden

input:focus::-webkit-input-placeholder{
	opacity: 0;
}
Copy the code

3. Input displays the numeric keypad

When type=”number” is used alone, iOS does not set up the number keypad in the pattern of the nine grid. To set up the number keypad in the pattern=”[0-9]*” attribute is required

<! Numeric keypad with symbols, not sudoku style -->
<input type="number"/>

<! -- Nine-grid numeric keypad -->
<input type="number" pattern="[0-9] *"/>

<! -- Phone number keypad -->
<input type="tel"/>
Copy the code

4. When searching, the enter button on the keyboard is set as “search”.

Input uses type=”search” and is placed in the form. The combination changes the enter button text in the input method to “search.”

<form action="">
	<input type="search" />
</form>
Copy the code

5. Change the input placeholder color

::-webkit-input-placeholder { /* WebKit browsers */
  color:    # 999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color:    # 999;
  opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    # 999;
  opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color:    # 999;
}
Copy the code
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit*/  
    color:    # 666;  
}  
input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
    color:    # 666;  
}  
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */  
    color:    # 666;  
}  
input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ */  
    color:    # 666;  
} 
Copy the code

6. Failure of autofocus Focus () in iOS

In iOS, focus cannot be automatically acquired. Focus must be executed in a function that listens to events issued by the user, for example:

// openNotifyReplay is an event triggered by click
openNotifyReplay = (e) = > {
    this.setState({
        notifyReplayVisible: true
    }, () = >{
        document.getElementById("replayPopupText").focus()
    })
}
Copy the code