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