[英]Removing a class when clicking anywhere outside an element
我是 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
還是很陌生。 謝謝!
對於這個簡單的事情,不需要使用 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>
您可以使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.