Chrome for Android修改input type时忽略inputmode问题咨询

在Android Chrome浏览器中，动态切换input元素的type属性（如在password和text间切换）时，inputmode="numeric"会被忽略，无法唤起数字键盘；但同样代码在iOS Chrome中可正常工作。

问题重现代码 #

class InputApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        mask: true
    }
  }
  
  render() {
    return (
      <div>
        <h2>Entry</h2>
        <input type={this.state.mask? "password": "text"} onFocus={() => {this.setState({mask: false})}} onBlur={() => {this.setState({mask: true})}} inputMode="numeric" />
      </div>
    )
  }
}

ReactDOM.render(<InputApp />, document.querySelector("#app"))

原因分析 #

Android Chrome在切换input的type属性时，不会重新读取inputmode配置，尤其是从password切换到text时，键盘类型不会同步更新为numeric。

解决方案 #

方案1：避免切换type，用CSS实现密码掩码

保持input的type始终为text，通过CSS控制文本是否显示掩码，确保inputmode持续生效：

class InputApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        mask: true
    }
  }
  
  render() {
    return (
      <div>
        <h2>Entry</h2>
        <input 
          type="text" 
          inputMode="numeric"
          style={{
            WebkitTextSecurity: this.state.mask ? 'disc' : 'none'
          }}
          onFocus={() => {this.setState({mask: false})}} 
          onBlur={() => {this.setState({mask: true})}} 
        />
      </div>
    )
  }
}

ReactDOM.render(<InputApp />, document.querySelector("#app"))

-webkit-text-security是webkit内核私有属性，主流移动端浏览器均支持。

方案2：切换type后手动重置inputmode

若必须切换type，可在状态更新后重新设置inputmode属性，强制Chrome更新键盘类型：

class InputApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        mask: true
    }
    this.inputRef = React.createRef()
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.mask !== this.state.mask) {
      const input = this.inputRef.current
      input.setAttribute('inputmode', 'numeric')
      // 可选：若键盘未自动更新，可强制重新聚焦
      input.focus()
    }
  }
  
  render() {
    return (
      <div>
        <h2>Entry</h2>
        <input 
          ref={this.inputRef}
          type={this.state.mask? "password": "text"} 
          inputMode="numeric"
          onFocus={() => {this.setState({mask: false})}} 
          onBlur={() => {this.setState({mask: true})}} 
        />
      </div>
    )
  }
}

ReactDOM.render(<InputApp />, document.querySelector("#app"))

内容的提问来源于stack exchange，提问作者tjadli