输入上的onfocus和onblur事件 [英] onfocus and onblur events on input

问题描述

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

I'm trying to make a contact form, which should apply a class for css transitions when the input is onfocus/clicked by the user. If the user has typed name, the class from onfocus should stay there. If nothing is typed, an onblur event should remove the class and the effect.

我正在尝试这样的事情，但我甚至无法使onfocus事件变得棘手测试我的步骤的提醒......

I'm trying something like this, but I can't even make the onfocus event tricker an alert for testing my steps...

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

推荐答案

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>

这篇关于输入上的onfocus和onblur事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！