输入上的 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>

Answer 2

没有 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。

请注意，此时每次点击都会添加一次新类。

Answer 3

我猜你使用 css 伪类的更好解决方案。使用如下 css 样式：

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

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

这种情况下不需要通过js处理焦点事件，也不需要动态改变元素的类。

Answer 4

试试这个：

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

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

Answer 5

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

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

Answer 6

这里是修复，

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>

Answer 7

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

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

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

Answer 8

您好，您只需像这样更改您的 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>

Answer 9

你可以试试这样的：

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>