Question

$(document).ready(function() {

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

$("#fn").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:focus").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;
}

});

});

我希望input只有一个方框阴影：焦点，除了我想要的边框颜色和边距底部保持不变，就像在脚本中一样。

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

Answer 1

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

＆＃13;

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

＆＃13;

<form action="#" method="post">
  
    <div>
        <label for="name">Text Input</label>
        <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>
  
    <div>
        <label for="textarea">Textarea</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>
  
</form>

＆＃13;

Answer 2

假设您因动态更新而无法使用CSS，并且很可能#fn和.f_n不是同一个元素（否则您应该this），你可以删除模糊的盒子阴影

$(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');
        }
    });
});

Answer 3

只有当你打算使用css时才能这样做:(比你的例子更多的方框）

.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);
}

Answer 4

这可以使用纯CSS完成：

input {
  margin: 2px 0;
  }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  box-shadow: 1px 1px 10px #666;
  outline: 0;
  }

<input type="text" name="fname"><br>
<input type="text" name="lname"><br>
<input type="email" name="email"><br>
<input type="password" name="password"><br>
<input type="password" name="repassword">

Answer 5

在下面添加以下示例代码可能有效，因为您尚未添加HTML and CSS，因此很难理解您添加了哪些内容，但您可以在jquery.

中添加此内容

$(document).ready(function() {
$("input[type='text']").on('focus',function(){
	$(this).css({
 	 "box-shadow": "inset 0 1px 1px #dab6b6, 0 0 8px #da0707"
 		});
	});
  $("input[type='text']").on('blur',function(){
	$(this).css({
 	 "box-shadow": "inset 0 0px 0px #dab6b6, 0 0 0px #da0707"
 		});
	});
});

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

如何在单击输入框后删除框阴影？

5 个答案: