javascript - Safari下的input无法输入

Question

用vue开发了个wangye

使用到搜索input[type=text] 和contenteditable 的p，在chrome下使用正常

在 Safari下无法输入，还有就是Safari下网页可以缩放，设置了viewport无效

注意gif底下点击之后出现的Done，但是文本框中就是没有值

---

input的code

<p class="search">
      <form @submit.prevent="handleSubmit">
        <input type="text" name="q" v-model="q" placeholder="输入您想搜索的内容" @click="test($event)">
        <input type="submit" value="" class="search-submit">
      </form>
    </p>

---

给input加了个click事件，被点击的对象确实是input框本身。

---

结贴！！！

原来是css设置了-webkit-user-select: none导致的

感谢各位~~~

Answer 1

你是不是给 input 设置了 -webkit-user-select: none ？

补充：
之前踩过坑 iOS 设置了 -webkit-user-select: none 会导致 input 无法输入

把 CSS 改成这样

*:not(input) {
  -webkit-user-select: none;
}

Answer 2

谢邀~

你对这个input做了什么???<斜眼

补充:

input 有css定位吗?

如果有, 不要直接给input设置position,input 外层设置一个容器, 给这个容器设置position;

兼容性问题...前端开发必走之坑.

Answer 3

那个网页缩放的问题，你的意思是双击放大还是拉伸缩放？如果是拉伸缩放，你加上在head加上<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
试试，如果是双击放大，建议你用个插件吧fastclick.js。
至于楼主说input无法输入？你看看你input是不是层级出现问题了？怎么点击貌似没有反应的，你检查一下它的样式看看，或者你测试一下输入框的click事件看看，是不是没有获取到，你就给个图，搞不懂到底哪里出了问题啊