Javascript 调整浏览器大小时更改占位符

当浏览器的宽度小于800时，我想在文本框中添加一个占位符，但我不确定我哪里出错了

<form class="info">
            <script>add();</script>
            <label>Name</label> <input type="text" class="box" name="name" placeholder="" size="40"><br><br>
</form>

添加（）；
名称

还有JS

<script>
function add(){ 
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (w < 800) {
    document.getElementsByName('name')[0].placeholder='Name';
} else
{
}}
</script>

函数add（）{
var w=window.innerWidth | | | document.documentElement.clientWidth | | document.body.clientWidth；
如果（w<800）{
document.getElementsByName（'name'）[0]。占位符='name'；
}否则
{
}}

在上面的代码中，您定义了一个函数，调用该函数时将执行一些javascript

但是在哪里调用add函数呢？如果希望在每次调整浏览器窗口大小时执行该操作，则应在“窗口大小调整”事件中执行该操作

例如：

<script>
    window.onresize = function(event) {
        var w = $(window).width();
        if (w < 800) {
           document.getElementsByName('name')[0].placeholder='Name';
        } else {
           document.getElementsByName('name')[0].placeholder='';
        }
    };
</script>

window.onresize=函数（事件）{
var w=$（window.width（）；
如果（w<800）{
document.getElementsByName（'name'）[0]。占位符='name'；
}否则{
document.getElementsByName（'name'）[0]。占位符=“”；
}
};

在上面的代码中，您定义了一个函数，调用该函数时将执行一些javascript

但是在哪里调用add函数呢？如果希望在每次调整浏览器窗口大小时执行该操作，则应在“窗口大小调整”事件中执行该操作

例如：

<script>
    window.onresize = function(event) {
        var w = $(window).width();
        if (w < 800) {
           document.getElementsByName('name')[0].placeholder='Name';
        } else {
           document.getElementsByName('name')[0].placeholder='';
        }
    };
</script>

window.onresize=函数（事件）{
var w=$（window.width（）；
如果（w<800）{
document.getElementsByName（'name'）[0]。占位符='name'；
}否则{
document.getElementsByName（'name'）[0]。占位符=“”；
}
};

窗口。addEventListener（'resize'，function（）{
var w=window.innerWidth | | | document.documentElement.clientWidth | | document.body.clientWidth；
如果（w<800）{
document.getElementsByName（'name'）[0]。占位符='name'；
}否则{
document.getElementsByName（'name'）[0]。占位符=“”；
}
});

窗口。addEventListener（'resize'，function（）{
var w=window.innerWidth | | | document.documentElement.clientWidth | | document.body.clientWidth；
如果（w<800）{
document.getElementsByName（'name'）[0]。占位符='name'；
}否则{
document.getElementsByName（'name'）[0]。占位符=“”；
}
});

---

如果您没有考虑过，您可以使用CSS媒体查询在更大的浏览器上简单地隐藏占位符文本，而无需使用JavaScript：

HTML:

---

注意：CSS应该为占位符添加合适的供应商前缀，我并不是为了简单起见才添加这些前缀的。请参见

如果您没有考虑过，您可以使用CSS媒体查询在更大的浏览器上简单地隐藏占位符文本，而无需使用JavaScript：

HTML:

---

注意：CSS应该为占位符添加合适的供应商前缀，我并不是为了简单起见才添加这些前缀的。请参见

在DOM中存在输入之前运行函数，这样您将得到一个“未捕获的TypeError”。将

移动到

之后，在DOM中存在输入之前运行函数，这样您将得到一个“未捕获的TypeError”。将

移动到

之后谢谢你，这正是我想要实现的！谢谢你，这正是我想要实现的！是的，我意识到我没有正确地调用它，你的两个答案都按照我打算实现它的方式工作，非常感谢。是的，我意识到我没有正确地调用它，你的两个答案都按照我打算实现它的方式工作，非常感谢。有趣的是，我使用css删除标签、@media screen和（最大宽度：800px）{label{display:none；}但没有考虑使用它来占位符。有趣的是，我使用CSS删除标签，@媒体屏幕和（最大宽度：800 px）{标签{显示：无；}}，但没有考虑使用它来占位符。谢谢

<form class="info">
<label>Name</label> 
<input type="text" class="box" name="name" placeholder="Name" size="40">
</form>

input::placeholder {color:transparent;}
@media (max-width:800px) {
    input::placeholder {color:gray;}
}