Maurice Twomey Maurice Twomey - 4 months ago 31
Javascript Question

Remove input placeholders on small screen / mobile but add them again when resized to desktop

HTML

<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="hidden-lg hidden-md hidden-sm">Label 1</label>
<input type="text" placeholder="Placeholder 1" class="form-control" />
</div>
<div class="form-group">
<label class="hidden-lg hidden-md hidden-sm">Label 2</label>
<input type="text" placeholder="Placeholder 2" class="form-control" />
</div>
<div class="form-group">
<label class="hidden-lg hidden-md hidden-sm">Label 3</label>
<input type="text" placeholder="Placeholder 3" class="form-control" />
</div>
</div>
</div>
</div>


JQUERY

jQuery(document).ready(function () {

// Invoke Placeholder plugin to fix the IE9 placeholder issue
$('input, textarea').placeholder();

//Add placeholder on inputs on desktop
enquire.register("screen and (min-width: 767px)", function () {
$("input[placeholder]").each(function () {
$(this).attr("data-placeholder", this.placeholder);

$(this).bind("focus", function () {
this.placeholder = '';
});
$(this).bind("blur", function () {
this.placeholder = $(this).attr("data-placeholder");
});
});
});
// Remove placeholders completely for mobile
enquire.register("screen and (max-width: 766px)", function () {
$("input[placeholder]").each(function () {
$("input[placeholder]").removeAttr("data-placeholder");
$("input[placeholder]").removeAttr("placeholder");

$(this).bind("focus", function () {
$("input[placeholder]").removeAttr("data-placeholder");
$("input[placeholder]").removeAttr("placeholder");
});
$(this).bind("blur", function () {
$("input[placeholder]").removeAttr("data-placeholder");
$("input[placeholder]").removeAttr("placeholder");
});
});
});


});

Hi,

On my form, I need the placeholders on the input fields to show for desktop only and get removed for mobile. This works fine using the above code except when the user re-sizes their desktop browser window. (i.e. goes from large screen, to small screen and then back to large screen again!) In this scenario, the placeholders do not re-appear.

I am using this placeholder plugin to make the placeholders work in older browsers: https://github.com/mathiasbynens/jquery-placeholder

And enquire.js to add/remove the placeholders based on screen size.

Would really appreciate any help you could give.

Cheers,
Maurice.

Resolved Fiddle - Using Ganesh's answer below
https://jsfiddle.net/MauriceT/v07ggLpe/23/

Answer

in my code in style tag you can see media query that is 540px, when screen width is 540px or less than that placeholder will hide, when it increases 540px placeholder will appear

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
ul {
    list-style-type: none;
}

ul li a {
    color: green;
    text-decoration: none;
    padding: 3px; 
    display: block;
}

@media screen and (max-width: 540px) {
    .form-control::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent;
    }
    .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color: transparent;
    }
    .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
       color: transparent;
    }
   .form-control :-ms-input-placeholder { /* Internet Explorer 10+ */
       color: transparent;
    }
}
</style>
</head>
<body>

<div class="container">
  <h2>Form control: input</h2>
  <p>The form below contains two input elements; one of type text and one of type password:</p>
  <form role="form">
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control" id="usr" placeholder="ganesh">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd">
    </div>
  </form>
</div>

</body>
</html>