移动端-webkit-user-select:none导致input/textarea输入框无法输入

最新推荐文章于 2021-12-28 15:10:48 发布

allWords

最新推荐文章于 2021-12-28 15:10:48 发布

阅读量2.4k

点赞数

分类专栏： ui 文章标签：移动端 Webkit 无法输入 input textrea

ui 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

移动端webview中写页面的时候发现个别Android机型会导致input、textareat输入框无法输入（键盘可以弹起，不是webView.requestFocus(View.FOCUS_DOWN);的问题）

由于移动端我习惯统一初始化样式：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  outline: none;
}

经过试错发现是-webkit-user-select:none;所导致的原因
当然如果你确实需要这个-webkit-user-select这个属性，css初始化代码改写为如下即可：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
*:not(input,textarea) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}