I have been trying to make this thing that focuses an input inside it when its outer div is clicked. I really hope this is not a duplicate as I have searched everywhere and not found an answer to this. I am at risk of being blocked so I hope no one flags this as a duplicate.
Here is the code below, it works with focusing the input, but when it has to unfocus it does not seem to work.
window.onload = function() {
var drop = document.getElementsByClassName("datadrop");
var drops = document.getElementsByClassName("datadrop").length;
for (x = 0; x < drops; x++) {
var input = document.getElementById(drop[x].getAttribute("input"));
drop[x].onclick = function(e) {
e.preventDefault();
clicked = 0
if (this == document.activeElement) {
input.blur();
} else {
input.focus();
}
}
}
}
.datadrop {
padding: 7.5px;
width: 85px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.datadrop .drop {
width: 150px;
position: fixed;
display: none;
}
.datadrop .item {
padding: 10px;
}
.datadrop .item:hover {
background-color: #F1F3F4;
}
.datadrop .divider {
padding: 5px;
color: grey;
}
.datadrop .divider:hover {
background-color: #ffffff;
}
.datadrop input {
width: 60px;
color: black;
}
.datadrop:hover {
background-color: #F1F3F4;
color: #5F6368;
}
.datadrop .click {
color: #5F6368;
}
.datadrop input {
background-color: transparent;
border: 1px solid transparent;
outline: none;
padding: 5px;
}
.datadrop input:focus {
background-color: white;
border: 1px solid black;
border-radius: 2.5px;
}
<div datadrop="scale" input="scales" class="datadrop">
<input type="text" id="scales" value="100%"> | <i class="fa-solid fa-caret-down click"></i>
<div class="drop" id="scale">
<div class="item">Fit</div>
<div class="item divider">
<hr>
</div>
<div class="item">Fit</div>
<div class="item">Fit</div>
<div class="item">Fit</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
I hope someone has an answer to this using only JavaScript, and I hope no one flags this as a duplicate, as I am trying to not do duplicates.