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

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

本文关键字：桌面 调整 小时 添加 移动 屏幕 占位符 输入 删除      更新时间：2023-09-26

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

并查询.js根据屏幕尺寸添加/删除占位符。

非常感谢你能提供的任何帮助。

干杯莫里斯。

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

在我的代码样式标签中，您可以看到 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>

试试这个：

请删除$("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");
            });
        });
    });
});

在这里演示

希望这应该有效....

您可以尝试以下脚本来删除移动视图上的占位符。

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