输入时的对焦和模糊事件

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>

没有jQuery，你可以尝试：

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

或作为小提琴：

https://jsfiddle.net/5v7n4je3/2/

主要是我认为您的问题在于 ElementsByClassName 数组，您必须迭代元素并为每个元素使用 onFocus。

请注意，新类目前每次单击都会添加一次。

我想使用css伪类是更好的解决方案。使用如下所示的 css 样式：

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

在这种情况下，您不需要通过 js 处理焦点事件并动态更改元素类。

试试这个：

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

更多参考： https://api.jquery.com/focus/

使用 jQuery，试试这个：https://api.jquery.com/focus/

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

这是修复，

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

尝试在正文代码的末尾添加脚本标记。

或者尝试实施下面提供的解决方案。

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

嗨，你只需要像这样更改你的 css 和 js：

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

你可以尝试这样的事情：

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";
}
};
};

所有这些都是针对这个 Html 文件：

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