Question

我希望在浏览器的宽度小于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>

Answer 1

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

但是你在哪里调用你的添加功能？您应该在窗口调整大小事件上执行此操作，如果您希望每次调整浏览器窗口大小时执行它。

示例：

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

Answer 2

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

DEMO

Answer 3

如果您没有考虑过它，您可以使用CSS媒体查询在较大的浏览器上隐藏占位符文本，而无需使用JavaScript执行任何操作：

HTML：

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

CSS：

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

注意：CSS应该有占位符的正确供应商前缀，为了简单起见，我没有添加。请参阅https://css-tricks.com/almanac/selectors/p/placeholder/

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

3 个答案: