javascript - 恢复模糊后从焦点应用的样式

Question

当用户关注文本字段时，我希望该文本字段中的文本更改颜色（以及其他几个属性）。当用户离开该字段（模糊）时，我希望文本/样式显示为焦点之前的样子。目前，我正在以似乎重复的方式进行操作。

$('#name1').focus(function() {
    $(this).css('color', 'red')
});
$('#name1').blur(function() {
        $(this).css('color', 'black')
});

我将如何做到这一点：

$('#name1').blur(function() {
        $(this).beforeFocus();
});

Answer 1

定义一个 css 样式关于它应该如何聚焦并将其移除 onblur。

.input_focus {
   color: red;
}

还有剧本，

$('#name1').focus(function() {
    $(this).addClass('input_focus')
}).blur(function() {
    $(this).removeClass('input_focus')
});

这样，您可以在聚焦时添加任意数量的样式。

Answer 2

$('#name1').focus(function() {
    $(this).addClass('focus');
}).blur(function() {
    $(this).removeClass('focus');
});

?

Answer 3

理想情况下，我会使用两个不同的 css 类并为这些类定义所有适当的属性。然后它会是这样的：

$('#name1').focus(function() {
    $(this).removeClass("blurred").addClass("focused");
}).blur(function() {
    $(this).removeClass("focused").addClass("blurred");
});

或者，如果您不想这样做，或者不同输入有不同的值，您可以使用data.

$('#name1').focus(function() {
    var $this = $(this);

    $this.data("oldColor", $this.css("color"))
         .css("color", "blue");

}).blur(function() {
    var $this = $(this);

    $this.css("color", $this.data("oldColor"));
});

Answer 4

执行 Vega 的建议，使用toggleClass()：

$("#name1").focus(function() {
    $(this).toggleClass("inpFocus");
}).blur(function() {
    $(this).toggleClass("inpFocus");
});