css 按下键入完成或输入键时，jQuery ajax请求

Posted 2021-05-13

var timer,
    timerDelay = 4000; // 4000ms delay, tweak for faster/slower

$(".some-input").on('keypress', function (e) {
    var activeField = $(this);
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    activeField.css({"backgroundColor": "orange", "color": "white"});
    
    if(e.which === 13) { //if enter key is pressed
        submitData(activeField);
        return;
    }
    
    timer = setTimeout(function() { // assign timer a new timeout 
        submitData(activeField);
    }, timerDelay);
    
    function submitData(activeField) {
        $.post( "ajax.php", { firstName: 'John', lastName: 'Cena' })
          .done(function(data) {
              activeField.css({"backgroundColor": "green", "color": "white"});
              console.log( "success" );
          })
          .fail(function() {
              activeField.css({"backgroundColor": "red", "color": "white"});
              //shake it
              activeField.addClass("shake");
              console.log( "error" );
          })
          .always(function() {
              console.log( "finished" );
          });
    }
});

@keyframes shake{
    0% { transform: translate(3px, 0); }
    50% { transform: translate(-3px, 0); }
    100% { transform: translate(0, 0); }
}

@-moz-keyframes shake{
    0% { -moz-transform: translate(3px, 0); }
    50% { -moz-transform: translate(-3px, 0); }
    100% { -moz-transform: translate(0, 0); }
}

@-webkit-keyframes shake {
    0% { -webkit-transform: translate(3px, 0); }
    50% { -webkit-transform: translate(-3px, 0); }
    100% { -webkit-transform: translate(0, 0); }
}

.shake {
    animation-name: shake;
    animation-duration: 150ms;
    animation-iteration-count: 2;
    animation-timing-function: linear;

    -moz-animation-name: shake;
    -moz-animation-duration: 150ms;
    -moz-animation-iteration-count: 2;
    -moz-animation-timing-function: linear;

    -webkit-animation-name: shake;
    -webkit-animation-duration: 150ms;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: linear;
}