[英]Removing a class when clicking anywhere outside an element
I am a first-year BSIT student.我是 BSIT 的一年级学生。 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.虽然我们的程序中没有教授 Web 开发(至少还没有),但我正在尝试自学HTML
、 CSS
、 JavaScript
,并且列表还在继续。
So the thing is, I'm trying to make border-bottom animate in both ways using CSS transition.所以问题是,我正在尝试使用 CSS 过渡以两种方式制作边框底部动画。 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.我只能触发 onclick 转换,但不能触发。
I would appreciate it if you'd do it in vanilla JS.如果您使用 vanilla JS 进行操作,我将不胜感激。 I am still very unfamiliar with jQuery
.我对jQuery
还是很陌生。 Thank you!谢谢!
There is no need to use JavaScript for this simple thing.对于这个简单的事情,不需要使用 JavaScript。
Using only CSS, we can accomplish this enough.仅使用 CSS,我们就可以做到这一点。
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:focus + .borderbtm { width: 200px; }
- 当input
选择器被聚焦时,这将设置#border-bottom
选择器的宽度。
.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. .inputfield:blur + .borderbtm { width: 0px; }
- 当input
选择器失去焦点时,这将设置回#border-bottom
选择器的宽度。 (So the user clicked outside of input
.) (因此用户在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.您可以使用document
而不是window
来监听 DOM 上的点击事件。
Also, you need to check if its false
then remove class.此外,您需要检查它是否为false
然后删除类。 Currently you are just checking if its truthy
which means - your if
condition never executes
.目前,您只是在检查它是否为truthy
,这意味着 - 您的if
条件永远不会executes
。
document.addEventListener('click', function(event) {
if (event.target != inputFieldtrigger) {
inputFieldtarget.classList.remove('searchTransition')
}
})
Working Demo: Vanilla JS工作演示: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.