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

【问题标题】：Remove Place Holder from a text box in Mobile device从移动设备的文本框中删除占位符
【发布时间】：2014-12-02 20:17:44
【问题描述】：

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

【问题讨论】：

您是否使用任何类型的 javascript 或服务器端编程语言？这可能有助于找到解决方案。
为什么占位符在移动设备上没有用？

标签： html css input responsive-design placeholder

【解决方案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

【讨论】：

【解决方案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所解释的那样。

【讨论】：

【解决方案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");
}

【讨论】：

【解决方案4】：

感觉很老套，但你可以使用 CSS 隐藏它：

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

【讨论】：

我认为没有::placeholder。你能提供来源吗？我看到here 正在使用供应商前缀。