How to put an effect: focus on div

Question

How to put an effect: focus on div

Navigation

#1 by (2 votes)
#2 by (2 votes)

-1

I have 5 input and each one falls within a div , I would like to know how to put a focus effect on each div which holds the input and when clicking outside the div remove the effect.

<div class="input">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome..."
 </div>

css

asked by anonymous 06.10.2017 / 05:10

2 answers

Change the file (jpeg, gif or swf) according to screen size? Change the onchange function execution of the select tag to an onclick function on a button

score 2 · Answer 1

I think the div focus event has no way to apply. But you can get what you are looking for with javascript, using this example it would look like this:

function fOnFocus(){
     this.parentNode.classList.add("div-focus");
}

function fOnBlur(){
     this.parentNode.classList.remove("div-focus");
}

var inputs = document.querySelectorAll(".txt");

for (var indice = 0; indice < inputs.length; indice++) {  
  var input = inputs[indice];
  input.onfocus = fOnFocus;
  input.onblur = fOnBlur;
}

In this case it would be enough to create a div-focus class in your CSS.

score 2 · Answer 2

As stated in the previous post "If you focus the div, you will not be able to focus on the input to type something" the solution is to apply a style to the div simulating focus.

In HTML, set% s of% of the% of their CSS classes to .

In the script, retrieve this value from the ids

$(document).ready(function(){
    $(".busca").click(function(){
       var status = $(this).attr('id');
       $(this).addClass(status);
    });
    
    $(document).mouseup(function(e){
    var container = $(".busca");
    if (!container.is(e.target))  
    {
       //procura elementos cuja ID começa por uma dada string, neste caso estilo
       //https://api.jquery.com/attribute-starts-with-selector/
       $('div[id^="estilo"]').removeClass(); 
    }
	});
 
});

.estilo1{
    box-shadow: 0 0 36px rgba(0, 0, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 2px solid rgba(255, 25, 10, 10);
    background-color: green !important;
}

.estilo2{
    box-shadow: 0 0 36px rgba(0, 0, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 2px solid rgba(25, 255, 10, 10);
    background-color: red !important;
}

.estilo3{
    box-shadow: 0 0 36px rgba(0, 0, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 2px solid rgba(25, 25, 10, 10);
    background-color: yellow !important;
}

.estilo4{
    border: 2px solid #96BED9;
    background-color: gray !important;
}

.estilo5{
    border: 4px solid #FF00FF;
    background-color: azure !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="estilo1" class="busca">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome...">
 </div>
 
 <div id="estilo2" class="busca">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome...">
 </div>
 
 <div id="estilo3" class="busca">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome...">
 </div>
 
  <div id="estilo4" class="busca">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome...">
 </div>
  
  <div id="estilo5" class="busca">
    <span>Nome <strong>*</strong></span>
    <input type="text" name="nome" class="txt txt_nome" placeholder="seu nome...">
 </div>

Note: The effect is to click on any part of divs and not on addClass review previous post