Jquery 单击输入框后，如何删除框阴影？ $（文档）.ready（函数（）{ var fname=“”； var lname=“”； var email=“”； var password=“”； var repassword=“”； $（“#fn”）.keyup（函数（）{ var vall=$（this.val（）； 如果（值==“”）{ $（“#fnerror”）.html（“请输入您的名字”）； css（{“边框颜色”：“#da0707”，“方框阴影”：“插入0 1px 1px#dab6b6，0 0 8px#da0707”，“边距底部”：“0”}）； $（“#fnerror”）.removeClass（“有效容器”）.addClass（“错误容器”）； fname=“”； } 否则如果（值长度

我只希望在

输入

具有：焦点时有一个框阴影，而不是希望边框颜色和边距底部保持与脚本中相同

---

**编辑：不幸的是，这是我的表单验证。

这可以用css轻松完成，可能这会对你有所帮助

输入[type=text]，text区域{
-webkit过渡：所有0.30秒都易于输入输出；
-moz转换：所有0.30秒的易入易出；
-ms转换：所有0.30秒均易于输入输出；
-o型过渡：所有0.30秒的缓进缓出；
大纲：无；
填充：3px 0px 3px 3px；
保证金：5px 1px 3px 0px；
边框：1px实心#DDDDDD；
}
输入[类型=文本]：焦点，文本区域：焦点{
盒影：0 0 5pxRGBA（81、203、238、1）；
填充：3px 0px 3px 3px；
保证金：5px 1px 3px 0px；
边框：1px实心rgba（812032381）；
}

文本输入
文本区域

只有当您选择以下选项时，css才有可能做到这一点：（示例以外的boxshadow）

---

这可以通过纯CSS实现：

输入{
边际：2px0；
}
输入[type=“text”]：焦点，
输入[type=“email”]：焦点，
输入[type=“password”]：焦点{
盒影：1px10px#666；
大纲：0；
}

假设您由于动态更新而无法使用CSS，并且很可能

\fn

和

.f\u n

不是同一个元素（否则您应该

此

），您只需删除模糊上的框阴影即可

.f_n:focus {
-webkit-box-shadow: 6px 6px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 6px 6px 35px 0px rgba(0,0,0,0.75);
box-shadow: 6px 6px 35px 0px rgba(0,0,0,0.75);
}

$（文档）.ready（函数（）{
var fname=“”；
var lname=“”；
var email=“”；
var password=“”；
var repassword=“”；
美元（“#fn”）。在({
keyup:function（）{
var vall=$（this.val（）；
如果（值==“”）{
$（“#fnerror”）.html（“请输入您的名字”）；
$（“.f_n”）.css({
“边框颜色”：“da0707”，
“盒影”：“插入0 1px 1px#dab6b6，0 0 8px#da0707”，
“页边距底部”：“0”
});
$（“#fnerror”）.removeClass（“有效容器”）.addClass（“错误容器”）；
fname=“”；
}否则如果（值长度<3）{
$（“#fnerror”）.html（“名字太短”）；
$（“.f_n”）.css({
“边框颜色”：“da0707”，
“盒影”：“插入0 1px 1px#dab6b6，0 0 8px#da0707”，
“页边距底部”：“0”
});
$（“#fnerror”）.removeClass（“有效容器”）.addClass（“错误容器”）；
fname=“”；
}否则{
$（“#fnerror”）.html（“太棒了！”）；
$（“.f_n”）.css({
“边框颜色”：“5cb85c”，
“页边距底部”：“0”，
“盒影”：“rgb（3718710）0px 1px 1px插图，rgb（22134，14）0px 0px 8px”
});
$（“#fnerror”）.removeClass（“错误容器”）.addClass（“有效容器”）；
fname=vall；
}
},
模糊：函数（）{
$（“.f_n”）.css({
“框阴影”：“无”
});
},
焦点：函数（）{
$（this.trigger（'keyup'）；
}
});
});

在下面添加此示例代码可能有效，因为您尚未添加

HTML和CSS

很难理解您还添加了哪些内容，但您可以在

jquery中添加此示例代码。

$（文档）.ready（函数（）{
$（“输入[type='text']）。在（'focus'，function（）上）{
$（this.css）({
“盒影”：“插入0 1px 1px#dab6b6，0 0 8px#da0707”
});
});
$（“input[type='text']）。在（'blur'，function（）上）{
$（this.css）({
“方框阴影”：“插入0 0px 0px#dab6b6，0 0 0px#da0707”
});
});
});

No JS required-使用
：focus
伪选择器在元素上应用那些CSS规则，为什么不使用纯CSS
input{}
，并且你可以使用CSS实现它，为什么使用这么多javascript？让我解释一下情况。上面的脚本会在出现错误时更改边框颜色和框阴影。所以普通的CSS:focus不适用，因为它不会对输出的错误做出反应。我建议删除js上的CSS声明，为每个状态声明一个css类，并根据状态切换每个类。当我再次关注某个特定错误时，如何为其添加框阴影？@maftyycs-我认为最好的方法是只在关注时触发keyup，这样就可以再次触发值检查等。我已将其添加到上面的代码中
.f_n:focus {
-webkit-box-shadow: 6px 6px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 6px 6px 35px 0px rgba(0,0,0,0.75);
box-shadow: 6px 6px 35px 0px rgba(0,0,0,0.75);
}

$(document).ready(function() {

    var fname = "";
    var lname = "";
    var email = "";
    var password = "";
    var repassword = "";

    $("#fn").on({
        keyup : function() {
            var vall = $(this).val();

            if (vall == "") {
                $("#fnerror").html("Please enter your first name");
                $(".f_n").css({
                    "border-color": "#da0707",
                    "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707",
                    "margin-bottom": "0"
                });
                $("#fnerror").removeClass("valid-container").addClass("error-container");
                fname = "";
            } else if (vall.length < 3) {
                $("#fnerror").html("First name is too short");
                $(".f_n").css({
                    "border-color": "#da0707",
                    "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707",
                    "margin-bottom": "0"
                });
                $("#fnerror").removeClass("valid-container").addClass("error-container");
                fname = "";
            } else {
                $("#fnerror").html("Awesome!");
                $(".f_n").css({
                    "border-color": "#5cb85c",
                    "margin-bottom": "0",
                    "box-shadow": "rgb(37, 187, 10) 0px 1px 1px inset, rgb(22, 134, 14) 0px 0px 8px"
                });
                $("#fnerror").removeClass("error-container").addClass("valid-container");

                fname = vall;
            }
        },
        blur : function() {
            $(".f_n").css({
                "box-shadow": "none"
            });
        },
        focus : function() {
            $(this).trigger('keyup');
        }
    });
});