如何在 JS 触发的事件上应用 CSS 过渡效果?

用户1938

我是 HTML/CSS/JS 的新手。

我有一个带有两个输入字段的 HTML 表单:电子邮件和最喜欢的网站。我的 JS 文件中有两个正则表达式来检查输入。这工作正常,但我想在用户单击开箱即用(onblur事件)时触发错误消息

我的问题是我想对错误应用过渡效果,因此随着时间的推移它变得可见,而不仅仅是突然出现。另外,现在,错误消息只弹出一次。

所以我的问题是:

  1. 如何对错误信息应用过渡效果;
  2. 如何使它在用户未能输入正确的输入时出现多次。

这是我的 HTML 文件:

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="CSS2_2.css">
</head>
<body>

    <div id="webpagevalidationerror" class="error">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        <p>Wrong website !</p>
    </div>


    <div id="emailvalidationerror" class="error">
        <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
        <p>Wrong e-mail !</p>
    </div>

    <form name="myform" class = "relative">
        <fieldset>
            <legend>Personal information:</legend>

            E-mail :<br>
            <input id="email" type="text" name="email" onblur="validateEmail(this)"><br>

            Favorite website :<br>
            <input id="webpage" type="text" name="webpage" onblur="validateWebpage(this)"><br><br>

            <input id="submit" type="submit" value="Submit">

        </fieldset>
    </form>

    <script src="JS_2.js"></script>

</body>

和 CSS 文件:

fieldset { 
    display: inline;
}

form.relative {
    position: relative;
    left: 150px;
    top: 150px;
}

p {
    position: relative;
    left: 30px;
    top: 16px;
    width: 150px;
}

div {
    position: relative;
    left: 120px;
    top: 130px;
    width: 250px;
    height: 50px;
    background-color: #f44336;
    color: white;
    display: none;
    /*transition: 2s; How to apply this transition for the .triggered attributes ?
    transition-timing-function: linear;*/ 
}

.triggered {
    display: block;
}

.closebtn {
    margin-right: 25px;
    margin-top: 13px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}

和 Javascript 文件:

var emailerror = document.getElementById("emailvalidationerror");
var webpageerror = document.getElementById("webpagevalidationerror");

function validateEmail(email) {

    var re = new RegExp("^[^@][email protected]$");
    var re2 = new RegExp("^[^@][email protected]$");

    if (!(re.test(email.value)) && !(re2.test(email.value)) || email.value == "") {
        emailerror.classList.toggle("triggered");
    }
}

function validateWebpage(webpage) {

    var re = new RegExp("^www\\.[a-zA-Z0-9_-]+\\.[a-z]+\\.[a-z]+$");

    if (!(re.test(webpage.value)) || webpage.value == "") {
        webpageerror.classList.toggle("triggered");
    }
}
scraaappy

你不能从display:none动画display:block诀窍是将缩放和不透明度设置为 0,然后在缩放动画持续时间的延迟下触发不透明度动画。

验证函数也可能返回一个布尔值,以在您提交表单时检查一切是否正常(并且您不想切换triggered类,因为只要输入错误,您希望消息仍然显示。所以只需添加类如果错误,则将其删除)。而不是在您的 HTML 元素上设置内联属性(onClick、onBlur、...),而是在您的 js 代码中设置事件侦听器(以避免混合 js 和 html)

这是一个改编自您现有代码的工作片段:

var emailerror = document.getElementById("emailvalidationerror");
var webpageerror = document.getElementById("webpagevalidationerror");
var closeBtn = document.getElementsByClassName("closebtn");
// loop throught closeBtn nodelist to add listener for each buttons
for(var i = 0; i < closeBtn.length; i++)
{
  closeBtn[i].addEventListener("click",function(e){
   e.currentTarget.parentElement.classList.remove("triggered");
   });
}

document.getElementById("webpage").addEventListener("blur",validateWebpage);
document.getElementById("email").addEventListener("blur",validateEmail);
document.getElementById("submit").addEventListener("click",submitForm);

function validateEmail() {
    var valToTest = document.getElementById("email").value;

    var re = new RegExp("^[^@][email protected]$");
    var re2 = new RegExp("^[^@][email protected]$");

    if (!(re.test(valToTest)) && !(re2.test(valToTest)) || valToTest == "") {
        emailerror.classList.add("triggered");
        return false;
    }
   emailerror.classList.remove("triggered");
    return true;
}

function validateWebpage() {
    var valToTest = document.getElementById("webpage").value;

    var re = new RegExp("^www\\.[a-zA-Z0-9_-]+\\.[a-z]+\\.[a-z]+$");

    if (!(re.test(valToTest)) || valToTest == "") {
        webpageerror.classList.add("triggered");
         return false;
    }
    webpageerror.classList.remove("triggered");
    return true;
}


function submitForm(e){
  e.preventDefault();  
  var emailOk = validateEmail();
  var webPageOk = validateWebpage();
  if(emailOk && webPageOk){
    document.getElementById("myform").submit();
  }
    
}
fieldset { 
    display: inline;
}

form.relative {
    position: relative;
    left: 150px;
    top: 150px;
}

p {
    position: relative;
    left: 30px;
    top: 16px;
    width: 150px;
}

div {
    position: relative;
    left: 120px;
    top: 130px;
    width: 250px;
    height: 50px;
    background-color: #f44336;
    color: white;
   /* display: none;*/
    /*transition: 2s; How to apply this transition for the .triggered attributes ?
    transition-timing-function: linear;*/ 
    transform-origin:50% 50%;
    transform:scale(0);
    opacity:0;
    transition: transform .2s, opacity 2s .2s;
    
}

.triggered {
   /* display: block;*/
    transform:scale(1);
    opacity:1;  
}

.closebtn {
    margin-right: 25px;
    margin-top: 13px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}
<div id="webpagevalidationerror" class="error">
        <span class="closebtn">&times;</span>
        <p>Wrong website !</p>
    </div>


    <div id="emailvalidationerror" class="error">
        <span class="closebtn">&times;</span>
        <p>Wrong e-mail !</p>
    </div>

    <form id="myform" class = "relative">
        <fieldset>
            <legend>Personal information:</legend>

            E-mail :<br>
            <input id="email" type="text" name="email"><br>

            Favorite website :<br>
            <input id="webpage" type="text" name="webpage"><br><br>

            <input id="submit" type="submit" value="Submit">

        </fieldset>
    </form>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章