Question

我有这个Javascript和HTML代码：

<script>
window.onload = function() {
    function validate(e) {
        var username = document.getElementById('username');
        if (username.value.trim() == '') {
            username.style.backgroundColor = '#ff4c4c';
            e.preventDefault();
        } else {
            username.style.backgroundColor = null;
        }
        var password = document.getElementById('password');
        if (password.value.trim() == '') {
            password.style.backgroundColor = '#ff4c4c';
            e.preventDefault();
        }else {
            password.style.backgroundColor = null;
        }
    }
    document.getElementById('login').addEventListener('submit', validate);
}
</script>

<div id="navrow">
    <img style="float: left;" src="questerslogoresized.png" />
    <ul>
        <li>Register</li>&nbsp&nbsp&nbsp</li>
        <li>About</li>&nbsp&nbsp&nbsp</li>
        <li>Reviews</li>&nbsp&nbsp&nbsp</li>
        <form id='login'  action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post'>
            <div style="position: absolute; right: 120px;">
                <input type='hidden' name='submitted' id='submitted' value='1'/>
                <input type='text' name='username' class="formlogin" placeholder='Username' id='username' value='<?php echo $fgmembersite->SafeDisplay('username') ?>' maxlength="20" />
                <span id='login_username_errorloc' class='error'></span>
                <input type='password' class="formlogin" placeholder="Password" name='password' id='password' maxlength="50" />
                <span id='login_password_errorloc' class='error'></span>
            </div>
            <input type='submit' name='Submit' value='Submit' />
            <!--<div class='short_explanation'><a href='reset-pwd-req.php'>Forgot Password?</a></div>-->
            <div><span style='color: #fff; position: absolute; top: 55px; right: 398px;'><?php echo $fgmembersite->GetErrorMessage(); ?></span></div>
        </div>
    </form>
</ul>

目前，如果文本框输入为空，则其颜色将变为红色。我正在寻找如何制作空盒子摇晃。

感谢帮助，谢谢！

Answer 1

＆＃13;

window.onload = function () {

    function validate(e) {
        var username = document.getElementById('username');
        if (username.value.trim() == '') {
            username.style.backgroundColor = '#ff4c4c';

            // Add a class that defines an animation
            username.classList.add('error');
          
            // remove the class after the animation completes
            setTimeout(function() {
                username.classList.remove('error');
            }, 300);
          
            e.preventDefault();
        } else {
            username.style.backgroundColor = null;
        }
        var password = document.getElementById('password');
        if (password.value.trim() == '') {
            password.style.backgroundColor = '#ff4c4c';
            
            // Add a class that defines an animation
            password.classList.add('error');
          
            // remove the class after the animation completes
            setTimeout(function() {
                password.classList.remove('error');
            }, 300);
          
            e.preventDefault();
        } else {
            password.style.backgroundColor = null;
        }
    }
    document.getElementById('login').addEventListener('submit', validate);
}

＆＃13;

.error {
    position: relative;
    animation: shake .1s linear;
    animation-iteration-count: 3;
}

@keyframes shake {
    0% { left: -5px; }
    100% { right: -5px; }
}

＆＃13;

<form id='login' action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post'>

<input type='text' name='username' class="formlogin" placeholder='Username' id='username' maxlength="20" />
<input type='password' class="formlogin" placeholder="Password" name='password' id='password' maxlength="50" />
<input type='submit' name='Submit' value='Submit' />
</form>

＆＃13;

Answer 2

您可以使用jquery shake效果。

首先，请确保将最新的jquery js文件链接到您的网页，然后输入 jquery-ui文件，如下所示：

然后，

只需将输入框包装在这样的div中：

<div class="shakeInput">
  input type='text' name='username' class="formlogin" placeholder='Username' id='username' value='<?php echo $fgmembersite->SafeDisplay('username') ?>' maxlength="20" />
</div>

然后像这样使用jquery：

$( ".shakeInput" ).effect( "shake" );

您必须为摇动添加适当的if statements，就像使用上面的红色背景颜色一样。

Answer 3

有一个很好的CSS动画跨浏览器库https://github.com/daneden/animate.css css animation by daneden。另外，使用jquery可以让生活更轻松。

如果为空，则摇动文本输入

3 个答案: