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

Question

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

Answer 1

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

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

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

$(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