Change span color depending on whether the input is empty

Question

Change span color depending on whether the input is empty

Navigation

#1 by (0 votes)

1

$(function(){
  $('.contactanos :input')
.change(function(){
  var $input = $(this);
  var $span = $('.form__input-focus');
  if ($input.val() === '')
  {
    $input.css("background-color", "#fff");
    $(this).data("span").css("background-color", "transparent");
  }
  else
  {
    $input.css("background-color", "#000");
    $(this).data("span").css("background-color", "grey");
  }
});
});

<style>
.form__input:focus+.form__input-focus {
background-color: #63E2FF
}
.form__input {
display: block;
border: 2px solid rgba(255,255,255,0.4);
border-radius: 20px;
font-size: 14px;
padding: 9px 20px 7px;
line-height: 20px;
letter-spacing: 1px;
width: 100%;
box-sizing: border-box;
resize: vertical;
background-color: transparent;
background-size: 13px;
background-position: top 13px right 10px;
background-repeat: no-repeat;
font-weight: 400;
color: #FFF;
transition: all .25s ease-in-out
}

.form__input:-moz-placeholder {
color: #FFF;
opacity: 1;
transition: all .25s ease-in-out
}

.form__input::-moz-placeholder {
color: #FFF;
opacity: 1;
transition: all .25s ease-in-out
}

.form__input:-ms-input-placeholder {
color: #FFF;
opacity: 1;
transition: all .25s ease-in-out
}

.form__input::-webkit-input-placeholder {
color: #FFF;
opacity: 1;
transition: all .25s ease-in-out
}

.form__input:-webkit-autofill {
color: #000
}

.form__input:focus {
border: 2px solid #fff
}
.form__input {
background-color: transparent;
background-image: url(../images/select-tip.svg);
background-size: 13px;
background-position: top 15px right 16px;
background-repeat: no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
.form__input-focus {
position: absolute;
top: 10px;
left: -40px;
width: 20px;
height: 20px;
border: 2px solid #63E2FF;
border-radius: 50%;
background-color: trasparent;
transition: all .25s ease-in-out
}
</style>

<form class="contactanos" action="" onsubmit="return Submit()" id="form">
            <div class="form__group">
              <input data-span="span1" class="form__input" type="text" id="name" placeholder="Nombre Completo" required>
              <span id="span1" class="form-focus"></span>
            </div>
            <div class="form__group">
              <input data-span="span2" class="form__input" type="email" id="email" placeholder="E-mail" required>
              <span id="span2" class="form-focus"></span>
            </div>
            <div class="form__group">
              <input data-span="span3" class="form__input" type="tel" id="phone" placeholder="Teléfono" required>
              <span id="span3" class="form-focus"></span>
            </div>
<div class="form__group">
              <textarea data-span="span4" class="form__input" id="body" rows="8" cols="80" placeholder="Mensaje" required></textarea>
              <span id="span4" class="form-focus"></span>
            </div>
          </form>

in the image the circle to the left is the span, when clicking on the input and writing has a focus effect and it is filled with that color, but when you remove the click and move to another it disappears. and what I want to know is how to make it stay filled if something is written and if it is empty is as before.

[! [enter the description of the image here] [1]] [1]

javascript jquery html css

asked by Alexcertz 08.11.2018 в 16:24

source

1 answer

HttpsURLConnection requests do not work for me in Glassfish 5 Make the code work with a button yes or no

score 0 · Accepted Answer

You have an error, in the script $ refers to jQuery, do not use it to name variables as if it were php. On the other hand, if you use change the color of the fill will appear after leaving a field after filling it, while the empty color will only appear if a previously filled field is empty, it will not appear if it is not filled. You can try it in the example. I hope it serves you

$(document).ready(function(){
$("input").change(function(){
    var spid = $(this).data("span");
    if ($(this).val()=="") {
         $(this).css("background-color", "#dedede");
         $("#"+spid).css("background-color", "#dedede");
    } else {
         $(this).css("background-color", "red");
         $("#"+spid).css("background-color", "red");
    }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="contactanos" action="" onsubmit="return Submit()" id="form">
                <div class="form__group">
                  <input class="form__input" type="text" id="name" placeholder="Nombre Completo" data-span="s1" required>
                  <span class="form-focus" id="s1">span1</span>
                </div>
                <div class="form__group">
                  <input class="form__input" type="email" id="email" placeholder="E-mail" data-span="s2" required>
                  <span class="form-focus" id="s2">span2</span>
                </div>
                <div class="form__group">
                  <input class="form__input" type="tel" id="phone" placeholder="Teléfono" data-span="s3" required>
                  <span class="form-focus" id="s3">span3</span>
                </div>
<div class="form__group">
                  
                </div></form>