帶有CSS動畫的敲除輸入驗證

Question

我爲我的應用程序使用KnockoutJS創建了一個僅限數字的輸入驗證器。當用戶按下非法按鍵（字母）時，我想讓目標輸入閃爍在上的CSS動畫，每個非法按鍵。就目前而言，它只是觸發一次動畫，我不知道爲什麼。

例子：http://codepen.io/anon/pen/oIamG/

任何人任何想法？

Answer 1

問題是你需要重置你的CSS動畫。爲了做到這一點，你需要刪除動畫，然後再添加它。
移動-webkit-動畫性能到輸入像

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