0

我正在尝试创建一个简单的效果，即每当有人在我的搜索字段中输入任何内容时，点击“输入”后，输入框内就会出现一个简单的小加载 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 的“搜索”类。

我的很多代码似乎都是正确的，但我可能只是有一个心理障碍。希望这是一个可以解决的简单问题。

4

3 回答 3

2

您输入的捕获键不正确。此外，“加载效果”仅适用于点击“输入”的用例。我已将您的 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');
    }    
  });

小提琴

http://jsfiddle.net/58uQU/1/

于 2013-10-31T23:19:38.020 回答
1

3件事：

  1. 您的选择器.searching不够具体。它被覆盖input:focus，因此没有效果。
  2. 您需要调用函数 preventDefault 而不仅仅是指向它。 e.preventDefault();
  3. 您的事件处理程序使用了错误的选择器。
于 2013-10-31T23:19:05.143 回答
0
于 2013-10-31T23:14:11.777 回答