Question

我只是调用一个函数highlightInput(this)，该函数只是更改所选输入的颜色。我认为可能会有更好的方法来避免重复。有什么想法吗？

HTML文件

<div class="form-group">
    <label for="your_name">Your name:</label>
    <input type="text" class="form-control" name="your_name" onfocus="highlightInput(this);">
</div>
<div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" name="email"onfocus="highlightInput(this);">
</div>
<div class="form-group">
    <label for="title">Event title:</label>
    <input type="text" class="form-control" name="title"onfocus="highlightInput(this);">
</div>
<div class="form-group">
    <label for="location">Event location:</label>
    <input type="text" class="form-control" name="location"onfocus="highlightInput(this);">
</div>

HighlightInput的外观如下：

var Color = {
    inputColor:function (color, self){
        $(self).css('backgroundColor', color);
    }
}

function highlightInput(self){
    Color.inputColor('lightyellow', self);
    $(self).blur(function(){
        Color.inputColor('white', self);
    });
}

Answer 1

摆脱jQuery并使用CSS来实现。

input.form-control:focus {
 background-color: lightyellow;
}

<input type="text" class="form-control">

Answer 2

您可以使用jQuery选择器来添加EventListener。

将以下内容添加到<head>标记中。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

JavaScript

$('input.form-control').focus(function(e){
   highlightInput(this);
});

Answer 3

$('input.form-control').blur(function() {
  this.style.backgroundColor = 'white';
});

$('input.form-control').focus(function() {
  this.style.backgroundColor = 'lightyellow';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="your_name">Your name:</label>
  <input type="text" class="form-control" name="your_name">
</div>
<div class="form-group">
  <label for="email">Email:</label>
  <input type="email" class="form-control" name="email">
</div>
<div class="form-group">
  <label for="title">Event title:</label>
  <input type="text" class="form-control" name="title">
</div>
<div class="form-group">
  <label for="location">Event location:</label>
  <input type="text" class="form-control" name="location">
</div>

如何删除此代码中的重复？

3 个答案: