帶CSS動畫的淘汰賽輸入驗證

Question

我為使用KnockoutJS的應用程序創建了僅數字輸入驗證器。 當用戶按下非法按鍵（字母）時，我希望目標輸入在每次非法按鍵上閃爍CSS動畫。 按照目前的情況，它只會觸發一次動畫，我不確定為什么。

示例： http ： //codepen.io/anon/pen/oIamG/

有任何想法嗎？

Answer 1

問題是您需要重置CSS動畫。 為此，您需要刪除動畫，然后再次添加它。
將-webkit-animation屬性移至輸入，例如

input {
    border: 2px solid black;
    padding: 8px;
    /* 0.2s is used, just to see the effect, the animation needs to be  */
    -webkit-animation-duration: 0.2s;
    -webkit-animation-direction:forwards;
    -webkit-animation-timing-function:ease-in-out;
}

@-webkit-keyframes inputValidationBorder {
    0% { border: 2px solid red; }
    100% { border: 2px solid black; }
}

然后使用以下綁定：

ko.bindingHandlers.numeric = {
    init: function (element, valueAccessor) {
        $(element).bind('webkitAnimationEnd', function(){
            this.style.webkitAnimationName = '';
        });

        $(element).on('keydown', function (event) {
            // allow backspace, delete, tab, escape, enter/return and period.
            // if input is a letter then disable keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96    || event.keyCode > 105)) {
               element.style.webkitAnimationName= 'inputValidationBorder'; 
               event.preventDefault();
            }
        });
    }
};