admin管理员组

文章数量:1323524

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.

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" autoplete="off" required>
            <label for="name">Navn*</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="pany" class="input-value" name="pany" type="text" autoplete="off">
            <label for="pany">Firma</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="email" class="input-value" name="email" type="email" autoplete="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.
} 

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.

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" autoplete="off" required>
            <label for="name">Navn*</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="pany" class="input-value" name="pany" type="text" autoplete="off">
            <label for="pany">Firma</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="email" class="input-value" name="email" type="email" autoplete="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.
} 
Share Improve this question asked Feb 2, 2016 at 9:02 Mikkel MadsenMikkel Madsen 3473 gold badges5 silver badges18 bronze badges
Add a ment  | 

9 Answers 9

Reset to default 4

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" autoplete="off" required>
            <label for="name">Navn*</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="pany" class="input-value" name="pany" type="text" autoplete="off">
            <label for="pany">Firma</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="email" class="input-value" name="email" type="email" autoplete="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>

Without jQuery you could try:

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

[].forEach.call(inputValue,function(el){
el.onfocus=function() {
if  (!el.classList.contains("input-expand")) {
   el.className +="input-expand";
} 
// If no value is added and user does onblurr event, it should remove class .input-expand, otherwise leave class there.
}; 

})

or as a fiddle:

https://jsfiddle/5v7n4je3/2/

mainly i think you problem lies in the ElementsByClassName array you have to iterate over the elements and use onFocus for every single one.

Notice the new Class is added once for every click at the moment.

I guess better solution for you to use css pseudo-classes. Use css style like below:

.input-value {
   transition: .7s;
}

.input-value:focus {
   width: 90px;
}

In this case you don't need to handle focus event through js and dynamically change classes of elements.

try this:

$(document).ready(function(){
   $(".input-value").focus(function(){
      //you focus code here
   });
});

more reference: https://api.jquery./focus/

Using jQuery, try this : https://api.jquery./focus/

   $("input").focus(function() { $(this).addClass("input-expand"); });
   $("input").blur(function() { $(this).val?null:$(this).removeClass("input-expand"); });

Here is the fix,

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


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

var onBlur = function() { 
    if  (this.classList.contains("input-expand")) {
       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-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" autoplete="off" required>
            <label for="name">Navn*</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="pany" class="input-value" name="pany" type="text" autoplete="off">
            <label for="pany">Firma</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="email" class="input-value" name="email" type="email" autoplete="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>

Try adding the script tag in the end of your body code.

Or else try and implement the solution provided below.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .my-focus-input{
            border-color: red;
            border-style: solid;
            border-width: 1px;
            height: 60px;
            width: 300px;
        }
        .my-blur-input{

        }
    </style>
</head>
<body>
    <input onfocus="myFocusFunction(this)" onblur="myBlurFunction(this)">
    <script type="text/javascript">
        function myFocusFunction(x) {
            x.className = "my-focus-input";
        }
        function myBlurFunction(x) {
            x.className = "my-blur-input";
        }
    </script>
</body>
</html>

Hi you just have to change yours css and js like this:

window.addEventListener("load",function(){
	var inputValue = document.getElementsByClassName("input-value");
	for(var i=0; i<inputValue.length; i++){
		var f = inputValue[i];
		f.className = "input-value input-expand";
		f.addEventListener("focus", function(){this.style.maxWidth="90px";}, false);
		f.addEventListener("blur", function(){if(this.value==""){this.style.maxWidth="30px";}}, false);
	}
}, false);
.input-expand {
	max-width:30px;
    transition:max-width 0.7s ease 0s;
}
<div>
    <form class="footer-contact-form" action="">
        <fieldset class="footer-form-field">
            <input id="name" class="input-value" name="name" type="text" autoplete="off" required>
            <label for="name">Navn*</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="pany" class="input-value" name="pany" type="text" autoplete="off">
            <label for="pany">Firma</label>
        </fieldset>
        <fieldset class="footer-form-field">
            <input id="email" class="input-value" name="email" type="email" autoplete="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>

You can try something like this:

window.onload = function() {
var span1 = document.createElement("span");
span1.innerHTML = "test";
span1.className = "info";
span1.style.display = "none";

var span2 = document.createElement("span");
span2.innerHTML = "test";
span2.className = "info";
span2.style.display = "none";

var span3 = document.createElement("span");
span3.innerHTML = "test";
span3.className = "info";
span3.style.display = "none";

var username = document.getElementById("username");
username.parentNode.appendChild(span1);

var password = document.getElementById("password");
password.parentNode.appendChild(span2);

var email = document.getElementById("email");
email.parentNode.appendChild(span3);

username.onfocus = function() {
span1.className = "info";
span1.innerHTML = "infoMsg";
span1.style.display = "inline";
};

username.onblur = function() {
var alphanums = /^[a-z0-9A-Z]+$/;
if (username.value.match(alphanums)) {
  span1.className = "ok";
  span1.innerHTML = "Accepted";
} else {
  span1.className = "error";
  span1.innerHTML = "error";
}
if (username.value.length == 0) {
  span1.className = "info";
  span1.innerHTML = "infoMsg";
  span1.style.display = "none";
}
};

password.onfocus = function() {
span2.innerHTML = "infoMsg";
span2.className = "info";
span2.style.display = "inline";
};

password.onblur = function() {
if (password.value.length < 6 && password.value.length > 0) {
  span2.className = "error";
  span2.innerHTML = "error";
}
if (password.value.length > 6) {
  span2.className = "ok";
  span2.innerHTML = "Accepted";
}
if (password.value.length == 0) {
  span2.className = "info";
  span2.innerHTML = "infoMsg";
  span2.style.display = "none";
}
};

email.onfocus = function() {
span3.innerHTML = "infoMsg";
span3.className = "info";
span3.style.display = "inline";
};

email.onblur = function() {
var res = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (res.test(email.value)) {
  span3.className = "ok";
  span3.innerHTML = "Accepted";
} else {
  span3.className = "error";
  span3.innerHTML = "error";
}
if (email.value.length == 0) {
  span3.className = "info";
  span3.innerHTML = "infoMsg";
  span3.style.display = "none";
}
};
};

All this is for this Html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Form Validation</title>
<link rel="stylesheet" href="validate.css" />
<script src="validate.js"></script>
</head>
<body>
<h1>Form Validation</h1>
<form class="signup">
  <table>
    <tr>
      <td><label for="username">Username:</label></td>
      <td><input type="text" name="username" id="username" /></td>
    </tr>
    <tr>
      <td><label for="password">Password:</label></td>
      <td><input type="password" name="password" id="password" /></td>
    </tr>
    <tr>
      <td><label for="email">Email:</label></td>
      <td><input type="text" name="email" id="email" /></td>
    </tr>
   </table>
  </form>
</body>
</html>

本文标签: javascriptonfocus and onblur events on inputStack Overflow