javascript - 在 HTML、CSS 和 Javascript 或 Jquery Apple iOS 上单击文本框

Question

我有一个网站 ( daccaa.com )，在我的 iPad 或 iPhone 上，我必须点击文本框两次而不是一次才能选择它。

这是代码:

.box {
    width: 62%;
    font-size: 20px;
    padding: 9px;
    font-family: 'Lato', sans-serif;
    margin-top: 9px;
    resize: none;
    outline: none;
    font-weight: 300;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}
.box:hover {
    width: 62%;
    font-size: 20px;
    padding: 9px;
    font-family: 'Lato', sans-serif;
    margin-top: 9px;
    border: solid 1px #FFFB00;
    outline: none;
}
.box:focus {
    width: 62%;
    font-size: 20px;
    padding: 9px;
    font-family: 'Lato', sans-serif;
    margin-top: 9px;
    border: solid 1px #FFD900;
    outline: none;
}

这是文本框的 CSS 代码，我想知道是否有任何 javascript 或 jquery 甚至 CSS 可以用来阻止您需要单击文本框两次。不过，我不想删除悬停和焦点。

Answer 1

在移动设备上，您需要使用媒体查询来移除悬停。这样做的原因是在 iPhone(也可能是其他手机)上，当您单击具有悬停功能的元素时，第一次单击只会触发悬停操作。第二个将焦点放在元素上。

在您的情况下，如果您想为桌面访问者保留悬停，您需要使用媒体查询将悬停限制在桌面(而不是移动设备)。