在加载时为浮动标签添加事件监听器

Question

在页面重新加载时，如果之前已经填写过表单，我的浮动标签会与输入文本重叠。为避免此问题，如果表单中有数据，我想更改输入文本的样式。

这是我的代码：

https://codepen.io/holly-williford/pen/pONYYM

document.getElementsByClassName("floating").addEventListener("load", hideLabel);

function hideLabel() {
    if(!$('input').val() ) {
        $('floating').addClass('warning');
    } else {

    }
}


<label class="floating">Test</label>
<input></input> 

warning {
    color: red; 
}

Answer 1

codepen示例中有很多地方需要更改。

1. HTML

<label class="floating">Test</label>
    <input> <!-- You should have a proper html tag -->

1. CSS

 .warning { //Notice the '.'
    color: red; 
  }

1. JS

    window.onload = hideLabel;
    function hideLabel() {
        if(!$('input').val() ) {
              $('.floating').addClass('warning'); // Notice the '.'
        } else {
    	    
        }
    }

这些修改将帮助您入门。

但是，您提到了jQuery，但您似乎并未充分利用它。