Can you use the: focus on div?

Navigation
3

I have a div that holds my input and submit , so I wanted to add an effect to make it cooler, .busca: focus and did not work, would anyone know how I could put a focus effect on this div ? 

<div class="busca">
    <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
</div>
    
asked by anonymous 05.10.2017 / 02:31

2 answers

0

If the idea is to apply some style to div when one of the fields gets focus, I would indicate using the focus event of the input and access the div by the parentElement attribute.

Below is an example that changes the background color of div when the field receives focus. Note that it will work regardless of how the focus is given to the field, whether it is tabs or auto focus. 

const busca = document.getElementById("busca");
const inputs = busca.getElementsByTagName("input");

for (const input of inputs) {
  input.addEventListener("focus", function (event) {
    this.parentElement.style.background = "green";
  });
  
  input.addEventListener("blur", function (event) {
    this.parentElement.style.background = "none";
  });
}
<div id="busca">
    <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
</div>
    
05.10.2017 / 03:22
2

If you focus on the div, you will not be able to focus on the input to type something.

Solution according to comment tipo o usuario clica na div busca ai exibe uma borda e um background , it was said, click on div search and not on algum elemento da div busca

In this case the solution is, like the other examples, to apply a style to the div simulating focus 

$(document).ready(function(){
       $(".busca").click(function(e){
           $(this).addClass("selected");
           e.stopPropagation();
       });   
       $(document).click(function(){ 
           $(".selected").removeClass("selected");
       });
    });
.selected{
    box-shadow: 0 0 5px rgba(0, 0, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 5px solid rgba(255, 255, 10, 10);
    background-color: green !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divclass="busca" id="onFocus">
        <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    <p>Faço parte da div</p>
    </div>

Other solutions

Example 2 

<div class="busca"  onclick="this.style.cssText = 'border: 2px solid #96BED9;'">
    <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    </div>

Example 3 

    <div class="busca" onclick="this.style.cssText = 'box-shadow: 0 0 5px rgba(0, 0, 238, 1);padding: 3px 0px 3px 3px;margin: 5px 1px 3px 0px;border: 5px solid rgba(255, 255, 10, 10);'">
    <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    </div>

style Object

  

You can edit the CSS to apply the desired effect

Example 4 - use of Jquery. Solution complete because clicking outside the div the style is removed 

 $(document).ready(function(){
       $(".busca").click(function(e){
           $(this).addClass("selected");
           e.stopPropagation();
           document.getElementById('onFocus').style.backgroundColor = "red";
       });   
       $(document).click(function(){ 
           $(".selected").removeClass("selected");
           document.getElementById('onFocus').style.backgroundColor = "";
       });
    });
.selected{
    box-shadow: 0 0 5px rgba(0, 0, 238, 1);

    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 5px solid rgba(255, 255, 10, 10);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divclass="busca" id="onFocus">
        <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    </div>

The idea of applying focus to the div that contains an input with data entry makes this input unfeasible (you will only be able to type it if you keep the mouse pointer clicked on it).

See the example below 

document.getElementById('onFocus').onclick = function () {
    document.getElementById('onFocus').focus();
};
  
div:focus {
  box-shadow: 0 0 5px rgba(0, 0, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 5px solid rgba(255, 255, 10, 10);
}
 <div class="busca" tabindex="-1" id="onFocus">
 <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    </div>

Example 5 - With background defined in CSS also works 

 $(document).ready(function(){
       $(".busca").click(function(e){
           $(this).addClass("selected");
           e.stopPropagation();
       });   
       $(document).click(function(){ 
           $(".selected").removeClass("selected");
       });
    });
.selected{
    box-shadow: 0 0 5px rgba(0, 0, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 5px solid rgba(255, 255, 10, 10);
    background-color: green !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divclass="busca" id="onFocus">
        <input type="text" name="" class="txt txt_busca" placeholder="faça sua pesquisa"/>
    <input type="submit" name="" class="bt bt_busca" value="OK"/>
    </div>
    
05.10.2017 / 03:09
Find and Replace Shortcut Visual Studio Code How to switch table colors by grouping by a specific table field?