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!
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; }
.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; }
.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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.