在提交时更改输入背景

Changing input background on submit

本文关键字：输入 背景 提交      更新时间：2023-09-26

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

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

输入的捕获密钥不正确。 此外，"加载效果"仅适用于点击"输入"的用例。 我已经保留了您的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/

3 件事：

  1. .searching的选择器不够具体。它正在被input:focus覆盖，因此没有效果。
  2. 你需要调用函数 preventDefault 而不仅仅是指向它。 e.preventDefault();
  3. 事件处理程序使用了错误的选择器。

尝试e.preventDefault();而不是e.preventDefault。

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

js小提琴

相关文章：