Question

我的页面中有文本框，并且有一个占位符。我需要从移动设备中的文本框中删除占位符。 文本框有一个类.search-box。

Answer 1

首先，获取当前视口宽度并将其与移动版本的最大宽度进行比较。

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

然后，如果视口宽度小于移动版本的最大宽度，则可以使用jQuery .attr() 更改占位符的值，如：

$(document).ready(function(){
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    if(w < 657){ // or replace with your mobile version's max width
      $(".search-box").attr("placeholder", "");
    }
});

并在窗口调整大小：

 $(window).resize(function(){
     var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
     if(w < 657){ // or replace with your mobile version's max width
        $(".search-box").attr("placeholder", "");
     }
     else{
        $(".search-box").attr("placeholder", "Im a placeholder");
    }
});

<强> Here's a demo in jsfiddle

Answer 2

仅使用CSS（仅适用于现代浏览器）：

@JamesKing方法很好，但他提到了不存在的选择器。以下是修改后的方法：

@media (max-width: 600px) {  /* mention the width limit here */
    input::-webkit-input-placeholder {
        color:transparent;
    }
    input:-moz-placeholder {
        color:transparent;
    }
    input::-moz-placeholder {
        color:transparent;
    }
}

正如DavidWalsh所述。

Answer 3

您可以使用javascript检测移动设备，如以下答案中所述：https://stackoverflow.com/a/3540295/743016。请注意，这并不能保证它可以在任何移动设备上运行！

在此代码中，您可以使用jquery删除占位符。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $("textarea").removeAttr("placeholder");
}

Answer 4

感觉很乱，但你可以用CSS隐藏它：

@media (max-width: 600px) {
    .search-box::placeholder {
         opacity: 0;
    }
}

从移动设备的文本框中删除占位符

4 个答案:

仅使用CSS（仅适用于现代浏览器）：