单击元素外的任意位置时删除类

Question

我是 BSIT 的一年级学生。 虽然我们的程序中没有教授 Web 开发（至少还没有），但我正在尝试自学HTML 、 CSS 、 JavaScript ，并且列表还在继续。

所以问题是，我正在尝试使用 CSS 过渡以两种方式制作边框底部动画。 我还没有完全了解事件侦听器及其事件类型，所以如果我在这里问，我希望我能学到。 代码是：

 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>

当我单击输入字段外的任何地方时，我希望它运行反向转换。 我只能触发 onclick 转换，但不能触发。

如果您使用 vanilla JS 进行操作，我将不胜感激。 我对jQuery还是很陌生。 谢谢！

Answer 1

对于这个简单的事情，不需要使用 JavaScript。

仅使用 CSS，我们就可以做到这一点。

在以下代码段中，我添加了两种新样式。

.inputfield:focus + .borderbtm { width: 200px; } .inputfield:focus + .borderbtm { width: 200px; } - 当input选择器被聚焦时，这将设置#border-bottom选择器的宽度。

.inputfield:blur + .borderbtm { width: 0px; } .inputfield:blur + .borderbtm { width: 0px; } - 当input选择器失去焦点时，这将设置回#border-bottom选择器的宽度。 （因此用户在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>

Answer 2

您可以使用document而不是window来监听 DOM 上的点击事件。

此外，您需要检查它是否为false然后删除类。 目前，您只是在检查它是否为truthy ，这意味着 - 您的if条件永远不会executes 。

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

工作演示： 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>