How can I remove the box-shadow after clicking away from the input box?

Refresh

December 2018

Views

356 time

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

});

});

I wish to only have a box-shadow when the input has :focus, other than that I want the border-color and margin-bottom remain the same like in the script.

**EDIT: This is my form validation unfortunately.

5 answers

1

Это можно сделать легко с помощью CSS, может быть это поможет U

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

Предполагая , что вы не можете использовать 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');
        }
    });
});
0

Добавьте этот пример ниже код может работать, как вы еще не добавили 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">
0

Это возможно с помощью CSS только если вы whant: (другой boxshadow, чем ваш пример)

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

Это может быть сделано с чистым 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">