Want to undo function after clicking anywhere but the orginal div
Question
I have an input that will open when clicked on and close when clicked anywhere on the page except the div itself. I use a function that changes the inputs background color when clicking on the input, but I can't figure out how to "undo" the color change when the user closes the input div by clicking elsewhere on the page.
function makeRed() { var p = document.querySelector('input'); p.style.background = 'red'; }
* { box-sizing: border-box; } body { background-color: black; } input[type=text] { cursor: pointer; position: relative; padding: 15px 25px 15px 20px; width: 20px; color: #525252; text-transform: uppercase; font-size: 16px; font-weight: 100; letter-spacing: 2px; border: none; border-radius: 5px; background: linear-gradient(to right, #FFFFFF 0%, #464747 #F9F9F9 100%); transition: width 0.4s ease; outline: none; } input[type=text]:focus { width: 300px; } i { position: relative; left: -37px; color: #000; cursor: pointer; pointer-events: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="searchBar"> <input placeholder='Search...' class='js-search' type="text" onClick="makeRed()"> <i class="fa fa-search"></i> </div>
6 answers
solution1
2 ACCPTED 2018-03-20 05:54:46
Try yo use focus and blur event listener
var x = document.querySelector('input'); x.addEventListener("focus", function() { this.style.background = 'red'; }) x.addEventListener("blur", function() { this.style.background = 'white'; })
* { box-sizing: border-box; } body { background-color: black; } input[type=text] { cursor: pointer; position: relative; padding: 15px 25px 15px 20px; width: 20px; color: #525252; text-transform: uppercase; font-size: 16px; font-weight: 100; letter-spacing: 2px; border: none; border-radius: 5px; background: linear-gradient(to right, #FFFFFF 0%, #464747 #F9F9F9 100%); transition: width 0.4s ease; outline: none; } input[type=text]:focus { width: 300px; } i { position: relative; left: -37px; color: #000; cursor: pointer; pointer-events: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="searchBar"> <input placeholder='Search...' class='js-search' type="text"> <i class="fa fa-search"></i> </div>
solution2
0 2018-03-20 05:40:43
您想在输入未聚焦时（当其他任何东西单击或未聚焦在移动设备上时）在输入上结束处理程序onfocusout来调用函数
onfocusout="revertColor()"
solution3
0 2018-03-20 06:04:14
add a blur function to input tag
function makeWhite() {
var p = document.querySelector('input');
p.style.background = 'white';
}
function makeRed() {
var p = document.querySelector('input');
p.style.background = 'red';
}
<body>
<div class="searchBar">
<input placeholder='Search...' class='js-search' type="text" onClick="makeRed()" onBlur="makeWhite()">
<i class="fa fa-search"></i>
</div>
</body>
solution4
0 2018-03-20 06:40:11
Instead of a JavaScript function, you can achieve the expected output using CSS.
Let us know if anything else you are doing in the function which is affecting the style.
Remove JS function and update your CSS to
input[type=text]:focus {
width: 300px;
background-color:red;
}
* { box-sizing: border-box; } body { background-color: black; } input[type=text] { cursor: pointer; position: relative; padding: 15px 25px 15px 20px; width: 20px; color: #525252; text-transform: uppercase; font-size: 16px; font-weight: 100; letter-spacing: 2px; border: none; border-radius: 5px; background: linear-gradient(to right, #FFFFFF 0%, #464747 #F9F9F9 100%); transition: width 0.4s ease; outline: none; } input[type=text]:focus { width: 300px; background-color:red; } i { position: relative; left: -37px; color: #000; cursor: pointer; pointer-events: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="searchBar"> <input placeholder='Search...' class='js-search' type="text"> <i class="fa fa-search"></i> </div>
solution5
-1 2018-03-20 05:39:06
You can also use onfocus and onfocusout
var p = document.querySelector('input'); function makeRed() { p.style.background = 'red'; } function removeRed(){ p.style.background = 'initial'; }
<body> <div class="searchBar"> <input placeholder='Search...' class='js-search' type="text" onfocus="makeRed()" onfocusout="removeRed()"> <i class="fa fa-search"></i> </div> </body>
solution6
-2 2018-03-20 05:38:38
to reset a css property, set it to an empty string:
var p = document.querySelector('input'); function makeRed(el) { el.style.background = 'red'; } function resetBackground(el){ el.style.background = ''; } p.addEventListener('click', function(){ makeRed(this); }, false); p.addEventListener('blur', function(){ resetBackground(this); }, false);
<input type="text">
call resetBackground inside a blur event.
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.
Related Question
How to close a div by clicking outside anywhere?
how to close popup DIV by clicking anywhere on the body
jQuery Close DIV By Clicking Anywhere On Page
How to make function run only with every cloned div separately not with orginal
I want to hide div after clicking on close button Angular 6
I want a 'click anywhere except this div' function that doesnt use 'event.stopPropagation();' or '.length'
jQuery: Close DIV by clicking anywhere apart from the DIV itself?
Hide the DIV when clicking anywhere outside the specified DIV
I want to overwrite the document with the output of a function after clicking on the page
Get orginal function in Javascript
Related Tags