Remove Place Holder from a text box in Mobile device

Question

I have textbox in my page and which has a placeholder. I need to remove the place holder from that textbox in mobile devices. The textbox has a class .search-box.

Answer 1

First, get the current viewport width and compare it to your mobile version's max width.

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

Then, you can use jQuery .attr() to change the value of your placeholder if the viewport width is less than the mobile version's max width, like:

$(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", "");
    }
});

and on window resize:

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

Using Only CSS (only for modern browsers):

@JamesKing approach was good but he mentioned non-existing selectors. Here is the modified approach:

@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;
    }
}

As explained by DavidWalsh.

Answer 3

You can detect a mobile device using javascript as described in this answer: https://stackoverflow.com/a/3540295/743016. Note that this does not guarantee that it will work on any mobile device!

In this code you can remove the placeholder with jquery.

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

Answer 4

It feels hacky but you can hide it using CSS:

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