Mobile HTML5 input FAQ (summary)

Time:2021-1-16

1. Remove the default fillet and inner shadow of input in IOS

In IOS, input will have its own rounded corners and inner shadows. The removal methods are as follows:


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

2. When the focus is input, the placeholder is not hidden


input:focus::-webkit-input-placeholder{
    opacity: 0;
}

3. Input box calls up the numeric keyboard

When you use type = “number” alone, IOS does not use a nine palace numeric keyboard. If you need to use a nine palace numeric keyboard, you need to add the attribute “pattern = [0-9] *”

<! -- numeric keyboard with symbols, not nine palace style -- >
<input type="number"/>

<! -- nine palace number keyboard -- >
<input type="number" pattern="[0-9]*"/>

<! -- phone number keyboard -- >
<input type="tel"/>

4. When searching, the enter button text of the keyboard is set to “search”

Solution: input uses type = “search” and puts it in the form. The combination of the two can change the enter button text into “search”


<form action="">
    <input type="search" />
</form>

5. Change the color of input placeholder


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

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

6. The failure of autofocus() in IOS

You can’t get the focus automatically in IOS. You have to execute focus in the function that listens to the events sent by the user

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

This article about mobile HTML5 input FAQ (summary) is introduced here. For more related mobile HTML5 input content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!