聚焦显示新的样式，怎么样失去焦点恢复成默认的样式？

源自：2-9 jQuery鼠标事件之focusout事件

聚焦显示新的样式，怎么样失去焦点恢复成默认的样式？

$(function () {
    function fn(e) {
        $(this).val(e.data)
    }

    var aa = $("input");

    function a() {
        aa.focusin('慕课网', fn);
        aa.focusin(function () {
            aa.css("border", "3px solid red")
        });

        aa.focusout('', fn);
        aa.focusout(function () {
            $("input").css()
        })
    }

    a();
})

我给失去焦点样式为空的话，没有效果，请问怎么样让他恢复才原来的默认样式？

提问者：_青黛 2018-12-28 10:34

个回答

卡迪亚兹: 2018-12-28 15:31:26

已采纳

$(function () {
    function fn(e) {
        $(this).val(e.data)
    }

    var aa = $("input");

    function a() {
        aa.focusin('慕课网', fn);
        aa.focusin(function () {
            aa.css("border", "3px solid red")
        });

        aa.focusout('', fn);
        aa.focusout(function () {
            $("input").css()
        })
    }
    a();
})

你写的这个其实是对的，就是 aa.focusout() 这个地方，你没有设置 input 失去焦点的样式。

aa.focusout(function () {
     $("input").css()
})

此处应该为：

aa.focusout(function () {
    $("input").css('border', 'none')
})

卡迪亚兹

2019-01-31 10:11:29

啊。。不好意思。。确实是忘了测试了。
其实除了直接在 input 上修改 css ，还可以使用 addClass 和 removeClass 的方式来实现
```
<style>.abc{border: 3px solid red;}</style>
```
$(function () {
function fn(e) {
$(this).val(e.data)
}

var aa = $("input");

function a() {
aa.focusin('慕课网', fn);
aa.focusin(function () {
aa.addClass('abc')
});

aa.focusout('', fn);
aa.focusout(function () {
aa.removeClass('abc')
})
}

a();

})

0