Question

我正在尝试编写一个JS脚本，它将更改输入的文本值＆＃39;当屏幕大小达到＆lt; = 400px的宽度时，占位符属性，以便缩短文本而不是在较小的屏幕上切断文本。我在这里查看了网站以及可以向我展示如何在JS中使用媒体查询的其他资源，但到目前为止，没有一个工作 - 在任何宽度都没有看到任何变化，或者应用了较短的文本无论是否在400以下。我目前的代码如下所示;它是缩短文本的版本之一，无论屏幕的宽度如何：

<script>
    if(document.documentElement.clientWidth < 400){
            $("[placeholder='State/Province']").attr('placeholder', 'State/Prov.');
            $("[placeholder='Vehicle Series']").attr('placeholder', 'Series');
            $("[placeholder='Engine Size']").attr('placeholder', 'Eng. Size');
            $("[placeholder='Transmission Type']").attr('placeholder', 'Trans.');
    }
</script>

我尝试使用的其他变体作为＆＃34; if＆＃34;有条件的是......

if(screen.width < 400px){...}

if(window.matchMedia("(min-width: 400px)")){...}

使用事件处理程序和其他方法提到的其他建议，但如果可以使用类似媒体查询的解决方案，那就是我更喜欢使用的解决方案。无论是vanilla Javascript还是jQuery都可以使用。任何想法和建设性意见将不胜感激 - 谢谢。

Answer 1

试试这个：

if ($(window).width() < 400) {
 // Code here...
}

Answer 2

我会使用两个单独的属性，一个用于大屏幕，一个用于移动。这样，您就可以拥有更具响应性的设计。例如，如果用户在非常小的窗口中打开代码然后缩放它，它们仍然具有迷你版本。但是，在新的代码中，新的占位符将会填充。为什么不添加一个钩子来检查调整大小和适当地修改占位符：

＆＃13;

	$(window).resize(function () {
		if ($(document.body).width() < 400){ //your original issue was here
			$("input[placeholder-mobile]").each(function () {
				$(this).attr('placeholder', $(this).attr('placeholder-mobile'));
			});
		} else {
			$("input[placeholder-mobile]").each(function () {
				$(this).attr('placeholder', $(this).attr('placeholder-full'));
			});
		}
	});

	$(window).resize();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder-full="State/Province" placeholder-mobile="State/Prov." type="text" /><br />
	<input placeholder-full="Vehicle Series" placeholder-mobile="Series" type="text" /><br />
	<input placeholder-full="Engine Size" placeholder-mobile="Eng. Size" type="text" /><br />
	<input placeholder-full="ransmission Type" placeholder-mobile="Trrans." type="text" />

＆＃13;

基于媒体查询使用JavaScript更改占位符文本？

2 个答案: