Question

我想更改焦点输入元素的颜色。我试过这个但是它似乎没有起作用。

HTML

<li>
   <input id="text1" onfocusout="removeColor()"onfocus="changeColor()" class="slut" value="{{Number}}">
</li>
<li>
    <input id="text1" onfocusout="removeColor()"onfocus="changeColor()" class="slut" value="{{Priority}}">
</li>

JS

function changeColor() {
    $(this).style.backgroundColor = "red";
};
function removeColor() {
    $(this).style.backgroundColor = "white";
};

Answer 1

你只需要CSS：

input:focus { 
 background-color: yellow;
}

我确定这只是一个简单的示例，但请注意您的代码中有两个匹配的ID。我想其实你可能想要上课

input.yellow:focus { background-color: yellow; }
input.pink:focus { background-color: pink; }

例如

Answer 2

TLDR;你可以在没有jQuery的情况下做到这一点

CSS选择器

input {
  background-color: white;
}

input:focus {
  background-color: red;
}

如果使用jQuery

$('input').focus(function() {
  $(this).css('background', 'red');
});
$('input').focusout(function() {
  $(this).css('background', 'white');
});

JQUERY：SNIPPET

$('input').focus(function() {
  $(this).css('background', 'red');
});

$('input').focusout(function() {
  $(this).css('background', 'white');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>

Answer 3

您可以使用

input:hover{
  background-color:#ff00ff;
}

js Fiddle example

Answer 4

如果您想使用jQuery执行此操作，可以使用css()方法：

function changeColor() {
    $(this).css({"background-color":"red"});
}
function removeColor() {
    $(this).css({"background-color":"white"});
}

更好的方法是使用CSS / jQuery的组合：

CSS：

.colored {
    background-color: red;
}
:not(.colored) {
    background-color: white;
}

JavaScript的：

var colorClass = "colored";
function changeColor() {
    $(this).addClass(colorClass);
}
function removeColor() {
    $(this).removeClass(colorClass);
}

我更喜欢将一个班级作为切换。这样做的好处是，您可以在CSS中更新和更改样式，而无需更改JavaScript。这是一个很好的关注点分离。此外，您可以设置子元素的样式并让它们继承切换状态。

Answer 5

this中的第一个onfocus。然后将$(this).style.backgroundColor = "red";更改为$(temp).css("backgroundColor", "red");
也可以使用onblur' not onfocusout`

function changeColor(temp) {
    $(temp).css("backgroundColor", "red");
};
function removeColor(temp) {
    $(temp).css("backgroundColor", "white");
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><input id="text1" onblur="removeColor(this)" onfocus="changeColor(this)" class="slut" value=""></li>
<li><input id="text" onblur="removeColor(this)" onfocus="changeColor(this)" class="slut" value=""></li>
</ul>

希望这个帮助

如何在焦点时用javascript设置（this）输入元素

HTML

JS

5 个答案: