javascript - 输入时的 onfocus 和 onblur 事件

Question

我正在尝试创建一个联系表单，当用户聚焦/点击输入时，它应该为 css 转换应用一个类。如果用户输入了名称，onfocus 中的类应该保留在那里。如果没有输入任何内容，onblur 事件应该删除类和效果。

我正在尝试这样的事情，但我什至不能让 onfocus 事件欺骗器成为测试我的步骤的警报......

HTML:

<div>
    <form class="footer-contact-form" action="">
        <fieldset class="footer-form-field">
            <input id="name" class="input-value" name="name" type="text" autocomplete="off" required>
            <label for="name">Navn*</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="company" class="input-value" name="company" type="text" autocomplete="off">
            <label for="company">Firma</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="email" class="input-value" name="email" type="email" autocomplete="off" required>
            <label for="email">E-mail*</label>
        </fieldset>
        <fieldset class="footer-form-field-txt">
            <textarea id="message" class="input-value" name="message" required></textarea>
            <label for="message">Besked*</label>
        </fieldset>
        <input class="footer-msg-send" value="Send Besked" type="submit">
    </form>

    <button class="fetch-deal">Send</button>
</div>

CSS:

.input-expand { 
    transition: .7s;
    width: 90px;
}

JS:

var inputValue = document.getElementsByClassName("input-value");

inputValue.onfocus = function() {
    if  (!inputValue.classList.hasClass("input-expand")) {
       inputValue.addClass("input-expand");
    } 
    // If no value is added and user does onblurr event, it should remove class .input-expand, otherwise leave class there.
} 

Answer 1

var inputValue = document.getElementsByClassName("input-value");


var onFocus = function() { this.classList.add("input-expand");};

var onBlur = function() {if (!this.value) this.classList.remove("input-expand");};

for (var i = 0; i < inputValue.length; i++) {
    inputValue[i].addEventListener('focus', onFocus, false);
   inputValue[i].addEventListener('blur', onBlur, false);
}

.input-value { 
    transition: .7s;
    width: 45px;
}
.input-expand { 
    transition: .7s;
    width: 90px;
}

<div>
    <form class="footer-contact-form" action="">
        <fieldset class="footer-form-field">
            <input id="name" class="input-value" name="name" type="text" autocomplete="off" required>
            <label for="name">Navn*</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="company" class="input-value" name="company" type="text" autocomplete="off">
            <label for="company">Firma</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="email" class="input-value" name="email" type="email" autocomplete="off" required>
            <label for="email">E-mail*</label>
        </fieldset>
        <fieldset class="footer-form-field-txt">
            <textarea id="message" class="input-value" name="message" required></textarea>
            <label for="message">Besked*</label>
        </fieldset>
        <input class="footer-msg-send" value="Send Besked" type="submit">
    </form>

    <button class="fetch-deal">Send</button>
</div>