Javascript 删除小屏幕/手机上的输入占位符，但在调整到桌面时再次添加_Javascript_Jquery_Html_Css_Mobile

Javascript 删除小屏幕/手机上的输入占位符，但在调整到桌面时再次添加

javascript jquery html css mobile

Javascript 删除小屏幕/手机上的输入占位符，但在调整到桌面时再次添加,javascript,jquery,html,css,mobile,Javascript,Jquery,Html,Css,Mobile,HTML }) 嗨在我的表单中，我需要输入字段上的占位符仅用于桌面显示，并用于移动设备删除。使用上述代码可以很好地工作，除非用户重新调整桌面浏览器窗口的大小。i、从大屏幕到小屏幕，然后再回到大屏幕！在这种情况下，占位符不会重新出现我使用此占位符插件使占位符在旧浏览器中工作：并询问e.js根据屏幕大小添加/删除占位符非常感谢您能给予的任何帮助干杯，莫里斯解决小提琴-使用下面甘尼什的答案试试这个：请删除$input[占位符]以添加$input[.form control] 希望这

HTML

})

嗨

在我的表单中，我需要输入字段上的占位符仅用于桌面显示，并用于移动设备删除。使用上述代码可以很好地工作，除非用户重新调整桌面浏览器窗口的大小。i、从大屏幕到小屏幕，然后再回到大屏幕！在这种情况下，占位符不会重新出现

我使用此占位符插件使占位符在旧浏览器中工作：

并询问e.js根据屏幕大小添加/删除占位符

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

干杯，莫里斯

解决小提琴-使用下面甘尼什的答案试试这个：

请删除$input[占位符]以添加$input[.form control]

希望这能奏效……

试试这个：

请删除$input[占位符]以添加$input[.form control]

希望这能起作用……

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

引导示例保险商实验室{ 列表样式类型：无； } ullia{ 颜色：绿色；文字装饰：无；填充：3倍；显示：块； } @媒体屏幕和最大宽度：540px{ .form控件：：-webkit输入占位符{/*webkit浏览器*/ 颜色：透明； } .form控件：-moz占位符{/*Mozilla Firefox 4到18*/ 颜色：透明； } .form控件：：-moz占位符{/*Mozilla Firefox 19+*/ 颜色：透明； } .form控件：-ms输入占位符{/*Internet Explorer 10+*/ 颜色：透明； } } 表单控件：输入下表包含两个输入元素；一种类型为text，另一种类型为password：

姓名：密码：

在my code in style标记中，您可以看到媒体查询为540px，当屏幕宽度为540px或小于540px时，占位符将隐藏，当它增大时，将显示540px占位符

姓名：密码：

您可以尝试在下面的脚本中删除移动视图上的占位符

嗨，伊文。谢谢，但当我尝试在手机上仍然可以看到占位符时。我需要它消失在小屏幕上，并出现在大屏幕上，即使改变浏览器的大小。谢谢嗨，伊文。谢谢，但当我尝试在手机上仍然可以看到占位符时。我需要它消失在小屏幕上，并出现在大屏幕上，即使改变浏览器的大小。谢谢在你的答案中添加一个描述，说明它在宽度变化之间是如何工作的。代码很清楚。如果浏览器宽度低于540px，则使占位符透明。你可以在浏览器中找到你可以使用占位符伪元素的地方。这对我来说很好。我只需要删除移动设备上删除属性的代码：你让我从你的小提琴上删除删除占位符的代码，对吗？？？哦，没关系，甘尼什。我会自己做的！：谢谢你的帮助。我会将您的答案标记为已解决。请在您的答案中添加一个说明，说明在宽度变化之间它实际上是如何工作的代码很清楚。如果浏览器宽度低于540px，则使占位符透明。你可以在浏览器中找到你可以使用占位符伪元素的地方。这对我来说很好。我只需要删除移动设备上删除属性的代码：你让我从你的小提琴上删除删除占位符的代码，对吗？？？哦，没关系，甘尼什。我会自己做的！：谢谢你的帮助。我会将您的答案标记为已解决。问题是您正在删除attr本身，然后您尝试使用占位符查找它，但它不再存在。是的，好的-这很有意义。当屏幕调整大小时，是否可以重新添加属性？谢谢。问题是你正在删除attr本身，然后你尝试使用占位符来查找它，但它已经不存在了。是的，好的-这很有意义。当scre启动时，是否可以重新添加该属性重新调整尺寸？谢谢

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

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>