我試圖創建一個簡單的效果，只要有人輸入任何東西到我的搜索字段中，一旦點擊「輸入」，一個簡單的小加載gif出現在輸入框內。更改提交輸入背景

你可以在這裏看到我的代碼：http://jsfiddle.net/9KEKa/1/，這裏是原始的HTML，CSS和JS：

HTML

<form> 
    <input type="text" placeholder="Search..." class="transition-width" /> 
    <input type="submit" value="Search" class="hide" /> 
</form>

CSS

/* General */ 
.hide { 
    display: none; 
    visibility: hidden; 
} 

.transition-width { 
    -webkit-transition: width 0.5s ease; 
    -moz-transition: width 0.5s ease; 
    -o-transition: width 0.5s ease; 
    -ms-transition: width 0.5s ease; 
    transition: width 0.5s ease; 
} 

/* Search Form */ 
form input { 
    background: url('http://i.imgur.com/7BKx4xr.png') no-repeat right; 
    border: none; 
    cursor: pointer; 
    float: right; 
    margin-right: 100px; 
    width: 61px; 
} 

.searching { background: url('http://i.imgur.com/ayJ7sYg.gif') no-repeat right; } 

form input::-webkit-input-placeholder { color: #fff; } 

form input::-moz-input-placeholder { color: #fff; } 

form input:-moz-input-placeholder { color: #fff; } 

form input:-ms-input-placeholder { color: #fff; } 

form input:focus { 
    background: #efefef; 
    border: 1px solid #aaa; 
    cursor: auto; 
    width: 200px; 
} 

form input:focus::-webkit-input-placeholder { color: #666; } 

form input:focus::-moz-input-placeholder { color: #666; } 

form input:focus:-moz-input-placeholder { color: #666; } 

form input:focus:-ms-input-placeholder { color: #666; }

JavaScript（jQuery）

$(function() { 
    $('.search form').on('submit', function (e) { 
     e.preventDefault 

     $('.search form input.transition-width').addClass('searching'); 
    }); 
});

我想要做的就是添加包含我想要的動畫gif作爲背景的類「搜索」。

我的很多代碼似乎都是正確的，但我可能只是有一個心理障礙。希望這是一個可以解決的簡單問題。

來源

2013-10-31 Keenan Payne

您輸入的捕獲密鑰不正確。此外，「加載效果」僅適用於點擊「輸入」的用例。我已經將您的CSS和HTML完好無損地保留下來了。

JS

$('.transition-width').keydown(function(event){ 
    if (event.keyCode == 13){ 
     event.preventDefault(); 
     event.stopPropagation(); 
     $('input.transition-width').blur(); 
     $('input.transition-width').addClass('searching'); 
    }  
    });