Chrome Android键盘在更改type属性字段时不反映inputmode

crcmnpdw  于 2023-04-03  发布在  Go
关注(0)|答案(1)|浏览(79)

inputmode似乎被Android设备上的chrome在更改输入type属性时忽略。
代码示例

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"))

https://jsfiddle.net/3qhyjbgv/21/
虽然有一个输入,掩盖了模糊时的值,inputmode似乎被Android设备上的chrome忽略。在IOS上的chrome中,它实际上按预期工作

zhte4eai

zhte4eai1#

我想添加评论,但我没有足够的声誉。
这可能是关于你的Android设备上的键盘设置吗?我在我的Android设备上尝试了你的代码,通常我的键盘上没有数字,但当我单击输入区域时,数字行出现在我的键盘上方。我的手机上没有数字键盘,所以它总是在我的键盘上方添加数字行。
所以我想说,输入模式不会被忽略,但它不像你期望的那样工作的原因可能是你的设备的键盘。你能在不同的android设备上试试吗?
你可能已经检查过this link,但如果你没有,也许这些解决方案中的一些可以为你工作。

相关问题