最近在做公司周年庆活动页的时候,遇到一个巨奇葩的问题,为什么说奇葩呢,因为测试的时候,好几个测试机都没有问题,只有iphone7那个手机死活没有办法将复制的文字粘贴到我页面的输入框。

我在网上找了很多很多方法,有人说用js自动给当前输入框获取焦点。就是这样

// html

<input id="input" value="value"></input>

用js给上面的input自动获取焦点。

function clickInput () {
    let input = document.getElementById('input')
    input.focus()
}

亲自试过,不行,不行。

还有人说,ios默认user-select: none;所以要给它设置为auto

#input {
    -webkit-touch-callout: none;
   -webkit-user-select: none;
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    -o-user-select: text !important;
    user-select: text !important;
}

可是!!!救命!我加上这个还是不行,我想了一下,获取是应该写成行内样式。

style="-webkit-user-select: auto; user-select: auto;"

当然,答案还是不行的。上面这些答案,获取有缘人遇到了刚好运气就那么好,你可以试试。

最后,我想是不是换个输入框就可以了,抱着试试,不行就去找测试battle,说:这个bug没法修!

然后我换成这样:

<textarea
        v-model="value"
        col="1"
        row="1"
        type="text"
        placeholder="INPUT YOUR UID"
        class="input"
        name=""
      />

居然成了!!!

居然可以了。

但众所周知,textarea和input还是有区别的,所以,要设置row = 1, col= 1,让它浑水摸鱼的充当一个input输入框吧。

OK~~~解决方案 get + 1

🎉🎉🎉

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐