JS

Question

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

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

Answer 1

您输入的捕获键不正确。此外，“加载效果”仅适用于人们点击“进入”的用例。我已经完整地保留了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/

Answer 2

3件事：

.searching的选择器不够具体。它正在由input:focus覆盖，因此无效。
你需要调用函数preventDefault不只是指向它。 e.preventDefault();
您的事件处理程序使用错误选择器。

Answer 3

尝试使用e.preventDefault();代替e.preventDefault。

当你的源代码在相关表单之前没有这样的类元素时，你的选择器不应该是.search form ..在这种情况下，它应该只是form。

jsFiddle

在提交时更改输入背景

3 个答案:

JS

小提琴