输入框获得焦点边框变颜色，失去焦点变颜色，输入框内有值变颜色

原创于 2018-09-26 11:15:57 发布 · 7.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery

jQuery 专栏收录该内容

32 篇文章

订阅专栏

本文介绍使用jQuery为网页输入框添加动态边框颜色和背景变化效果，同时实现输入验证功能。当输入框获得焦点时，边框变为绿色，背景为白色；失去焦点且输入为空时，背景变为浅灰色；输入非空时，背景恢复白色。

$('.pcblogin-inp')
    .focus(function() {
        $(this).css({ 'border': '1px solid #14C58E', 'background': '#fff' });
    })
    .blur(function() {
        $(this).css('border', '1px solid #CDCDCD');
        var value = $(this).val(); // 获取值
        if (value == '') {// 判断是否是空字符串，而不是null
           $(this).css('background','#F8F8F8');
           return false;
        }else{
           $(this).css('background','#fff');
        };
    });