Question

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

}）;

您好，

在我的表单上，我需要输入字段中的占位符仅显示桌面，并移除移动设备。除非用户重新调整其桌面浏览器窗口的大小，否则使用上述代码可以正常工作。（即从大屏幕切换到小屏幕，然后再次返回再到大屏幕！）在这种情况下，占位符不会重新出现。

我正在使用此占位符插件使占位符在旧版浏览器中运行：https://github.com/mathiasbynens/jquery-placeholder

并且enquire.js根据屏幕大小添加/删除占位符。

非常感谢你能给予的任何帮助。

干杯，莫里斯。

解决了小提琴 - 使用Ganesh的答案 https://jsfiddle.net/MauriceT/v07ggLpe/23/

Answer 1

在我的代码中使用样式标记，你可以看到540px的媒体查询，当屏幕宽度为540px或者小于占位符将隐藏的时候，当它增加540px占位符时会出现

<!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>

Answer 2

试试这个：

请删除$("input[placeholder]")以添加$("input[.form-control]")

jQuery(document).ready(function () {

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

    //Add Remove placeholder on inputs
    $("input[.form-control]").each(function () {
        $(this).attr("data-placeholder", this.placeholder);

        $(this).bind("focus", function () {
            this.placeholder = '';
        });
        $(this).bind("blur", function () {
            this.placeholder = $(this).attr("data-placeholder");
        });
    });

    //Add placeholder on inputs on desktop 
    enquire.register("screen and (min-width: 767px)", function () {
        $(".booking-engine-container 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");
            });
        });
    });

});

DEMO HERE

希望这应该有用......

Answer 3

您可以尝试使用以下脚本删除移动视图中的占位符。

  <script>
  var mql = window.matchMedia("screen and (max-width: 800px)")
    if (mql.matches){ // if media query matches
    $(':input').removeAttr('placeholder');
  }
  </script>

在小屏幕/移动设备上删除输入占位符，但在调整大小到桌面时再次添加它们

3 个答案: