CODEWITHSUNDEEP
javascripthtmlcss
justyouraveragebsitstudent
justyouraveragebsitstudent

Reputation: 23

Removing a class when clicking anywhere outside an element

I am a first-year BSIT student. Although web development isn't taught (at least not yet) in our program, I am trying to self-learn HTML, CSS, JavaScript, and the list goes on.

So the thing is, I'm trying to make border-bottom animate in both ways using CSS transition. I don't quite get event listeners and its event types yet, so I was hoping I could learn if I asked here. The codes are:

        var inputFieldtrigger = document.getElementById("searchFld");
        var inputFieldtarget = document.getElementById("border-bottom");
        
        inputFieldtrigger.onclick = function(){
            inputFieldtarget.classList.add('searchTransition');
        }

        window.addEventListener('click', function(event){
            if (event.target == inputFieldtrigger){
                inputFieldtarget.classList.remove('searchTransition')
            }
        })
div.searchfield{  
    margin:-10px 30px;
    padding:0;
    width:auto;
}
.inputfield {
    padding-top:10px;
    font-family: Calibri;
    font-size: 16px;
    color:black;
    text-align:left;
    box-sizing: border-box;
    width:60%;
    border: none;
    border-bottom: 1px solid blacsk;
    background:transparent;
}
.inputfield:focus {
    outline:none;
}
.inputfield:focus::placeholder{
    opacity:0%;
}
.borderbtm{
    border-bottom:1px solid black;
    width:0px;
    transition: width .25s ease-in-out;
}
.searchTransition {
    width:220px;
}
<div class="searchfield">
  <form action="index.html?">
    <input id="searchFld" class="inputfield" autocomplete="off" placeholder="Input product name...">
    <div id="border-bottom" class="borderbtm"></div>
  </form>
</div>

I want it to run the reverse transition when I click anywhere outside the input field. I was only able to trigger the onclick transition, but not the reversed.

I would appreciate it if you'd do it in vanilla JS. I am still very unfamiliar with jQuery. Thank you!

Upvotes: 2

Views: 1778

Answers (2)

Always Helping
Always Helping

Reputation: 14570

You could use document instead of a window to listen for a click event on the DOM.

Also, you need to check if its false then remove class. Currently you are just checking if its truthy which means - your if condition never executes.

document.addEventListener('click', function(event) {
   if (event.target != inputFieldtrigger) {
     inputFieldtarget.classList.remove('searchTransition')
    }
})

Working Demo: Vanilla JS

var inputFieldtrigger = document.getElementById("searchFld");
var inputFieldtarget = document.getElementById("border-bottom");

inputFieldtrigger.onclick = function() {
  inputFieldtarget.classList.add('searchTransition');
}

document.addEventListener('click', function(event) {
  if (event.target != inputFieldtrigger) {
    inputFieldtarget.classList.remove('searchTransition')
  }
})
div.searchfield {
  margin: -10px 30px;
  padding: 0;
  width: auto;
}

.inputfield {
  padding-top: 10px;
  font-family: Calibri;
  font-size: 16px;
  color: black;
  text-align: left;
  box-sizing: border-box;
  width: 60%;
  border: none;
  border-bottom: 1px solid blacsk;
  background: transparent;
}

.inputfield:focus {
  outline: none;
}

.inputfield:focus::placeholder {
  opacity: 0%;
}

.borderbtm {
  border-bottom: 1px solid black;
  width: 0px;
  transition: width .25s ease-in-out;
}

.searchTransition {
  width: 220px;
}
<div class="searchfield">
  <form action="index.html?">
    <input id="searchFld" class="inputfield" autocomplete="off" placeholder="Input product name...">
    <div id="border-bottom" class="borderbtm"></div>
  </form>
</div>

Upvotes: 3

Derek Wang
Derek Wang

Reputation: 10193

There is no need to use JavaScript for this simple thing.

Using only CSS, we can accomplish this enough.

On the following snippet, I have added two new styles.

.inputfield:focus + .borderbtm { width: 200px; } - This will set the width of #border-bottom selector when the input selector is focused.

.inputfield:blur + .borderbtm { width: 0px; } - This will set back the width of #border-bottom selector when the input selector loses focus. (So the user clicked outside of input.)

div.searchfield {
  margin: -10px 30px;
  padding: 0;
  width: auto;
}

.inputfield {
  padding-top: 10px;
  font-family: Calibri;
  font-size: 16px;
  color: black;
  text-align: left;
  box-sizing: border-box;
  width: 60%;
  border: none;
  border-bottom: 1px solid blacsk;
  background: transparent;
}

.inputfield:focus {
  outline: none;
}

.inputfield:focus::placeholder {
  opacity: 0%;
}

.borderbtm {
  border-bottom: 1px solid black;
  width: 0px;
  transition: width .25s ease-in-out;
}

.inputfield:focus + .borderbtm {
  width: 200px;
}

.inputfield:blur + .borderbtm {
  width: 0px;
}
<div class="searchfield">
  <form action="index.html?">
    <input id="searchFld" class="inputfield" autocomplete="off" placeholder="Input product name...">
    <div id="border-bottom" class="borderbtm"></div>
  </form>
</div>

Upvotes: 2

Related Questions