How to identify the focus on a div?

Question

How to identify the focus on a div?

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

Galera I set up an input system with the same android layout.

Everything works fine in% with% plots, but input provider is within input , as I have to add a button in place of x.

The problem is that when I hold the mouse over it the border line becomes blue, and when it exits it goes back to black.

I need to leave it equal to the input portions, ie when it is clicked it has to look blue regardless if the mouse is on it or not.

Here is my code:

$('.form_campos').on('focus blur', function(e) {
  $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');

$('.form_campos_box').on('focus blur', function(e) {
  $(this).parents('.box').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');

body {
  font-family: Verdana;
  font-size: 12px;
}

.form-group {
  position: relative;
  display: flex;
  height: 45px;
  float: left;
  margin-right: 2px;
}

.control-label {
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  transform: translate3d(5px, 22px, 0) scale(1);
  transform-origin: left top;
  transition: 240ms;
  z-index: 2;
}

.form-group.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

.form_campos {
  height: 20px;
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  font-size: 15px;
  padding: 5px;
  outline: none;
  border-color: #484848;
  border-style: solid;
  border-bottom-width: 1px;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
  background: transparent;
}

.form_campos:hover,
.form_campos:focus {
  border-color: #1E90FF;
}

.form_campos_numeros {
  width: 123px;
}



/* BOX INPUT E BOTAO */

.box {
  width: 250px;
  display: flex;
  height: 44px;
  border-color: #484848;
  border-style: solid;
  border-bottom-width: 1px;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
}

.box input {
  outline: 0;
  width: 230px;
  height: 20px;
  border: 0;
  background: transparent;
}

.box_bt {
  margin-top: 28px;
  cursor: pointer;
}

.box_bt:hover {
  color: #1E90FF;
}

.box:hover {
  border-color: #1E90FF;
}

.box.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

.form_campos_box {
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  font-size: 15px;
  padding: 5px;
  position: relative;
  display: block;
  outline: none;
}
/* FIM BOX INPUT E BOTAO */

<div class='form-group'>
  <label class='control-label' for='numParcelas'>PARCELAS*</label>
  <input type='text' class='form_campos form_campos_numeros' id='numParcelas' name='numParcelas'>
</div>

<br><br><br><br><br><br>

<div class='box'>
  <label class='control-label' for='auto'>FORNECEDOR*</label>
  <input type='text' class='form_campos_box' id='auto' name='nome'>
  <div class="box_bt">
    <i class='demo-icon'>X</i>
  </div>
</div>

JSFiddle

javascript html jquery css

asked by anonymous 19.02.2016 / 11:09

4 answers

Select in three tables in a list - MYSQL Execute code only if the user is not on the tab

score 1 · Answer 1

You can create a div that can be focused if you assign a tabindex to it.

By having a index tag, that is, by index, with 0 being the first item, the tabindex attribute of value "0" is the default. > Tip: You can assign the value "-1" to a tabindex , but it can only be focused via code and never by the user.

HTML

<div>Elemento sem tabindex (não focável)</div>
<div tabindex="0">Elemento normal (focável por script ou pelo clique/usuário)</div>
<div tabindex="-1" id="scripted">Elemento não focável pelo usuário (focável pelo script)</div>
<div id="test">Setar foco</div>

CSS

<style>
div:focus {
    background-color: Aqua;
}
</style>

Javascript

<script>
document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};
</script>

<div>1) Elemento sem tabindex (não focável)</div>
<div tabindex="0">2) Elemento normal (focável por script ou pelo clique/usuário)</div>
<div tabindex="-1" id="scripted">3) Elemento não focável pelo usuário (focável pelo script)</div>
<button id="foco">Focar elemento 3</button>


<style>
  div:focus {
    background-color: Aqua;
  }
</style>


<script>
  document.getElementById('foco').onclick = function() {
    document.getElementById('scripted').focus();
  };
</script>

I hope this helps you in something or serves your project!

Helpful links:
"How to focus div?" on Stackoverflow.com "Change focus into private div" on Stackoverflow.com "Tabindex | HTML" in the Mozilla Developer Network

score 0 · Answer 2

Hugo, the solution here is very simple, you should see each of these elementos as a componente , for example the elementos below:

<div class='box'>
  <label class='control-label' for='auto'>FORNECEDOR*</label>
  <input type='text' class='form_campos_box' id='auto' name='nome'>
  <div class="box_bt">
    <i class='demo-icon'>X</i>
  </div>
</div>

In my view, label[for='auto'] , input#auto and i.demon-icon form a single component, and all are grouped by div.box

In this case it is interesting that actions on any of the elements are reflected in the entire component, for this we will add classes to div.box .

var elem = {};
elem.auto = $("#auto");
elem.box = $(".box");

elem.auto.on("input", function (event) {
  elem.box.toggleClass("md-has-value", elem.auto.val());
});

elem.auto.on("focusin", function (event) {
  elem.box.addClass("md-focus");
});

elem.auto.on("focusout", function (event) {
  elem.box.removeClass("md-focus");
});

In the script above, whenever input#auto is in focus, div.box will have class md-focus , and when input#auto , div.box will have class md-has-value . p>

So now instead of setting the color with

.box_bt:hover {
   color: #1E90FF;
}

You will be seated with

.box.md-focus i ,
.box.md-focus label {
  color: #1E90FF;
  opacity: 1;
}

.box.md-focus {
  border-color: #1E90FF;
}

In the example above I'm applying the color when the input gains focus, not how much the mouse passes over it, because this is closer to the behavior of Android ...

In any case, you can substinuit events focusin and focusiout , mouseenter and mouseleave ...

In the example above, I also do a toggle of class ms-has-value , because you may want to apply an effect to the label if the input has any value.

score 0 · Answer 3

Is this the result you want?

Sorry for reactivating, I confused myself with the dates and thought it was this year. Now that I've seen Feb 2016.: |

What I moved was to add another class in toggle of jquery to each div , and create those classes in css . It looks like it worked.

$('.form_campos').on('focus blur', function (e) {

    $(this).parents('.form-group').toggleClass('focused focus', (e.type === 'focus' || this.value.length > 0));

}).trigger('blur');

$('.form_campos_box').on('focus blur', function (e) {

    $(this).parents('.box').toggleClass('focused focus', (e.type === 'focus' || this.value.length > 0))
 
}).trigger('blur');

body {
font-family: 'Verdana';
font-size: 12px;
}

.form-group {
  position: relative;
  display: flex;
  height: 45px;
  float: left;
  margin-right: 2px;
  border-color: #484848;
  border-style: solid;
  border-bottom-width: 1px;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;

}

.control-label {
  opacity: 0.4;
  pointer-events: none;
  position: absolute;
  transform: translate3d(5px, 22px, 0) scale(1);
  transform-origin: left top;
  transition: 240ms;
  z-index: 2;
}

.form-group.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

.form_campos {
  height: 20px;
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  font-size: 15px;
  padding: 5px;
  outline: none;
  background: transparent;
  border: none;
}



.form_campos_numeros {
  width: 123px;
}



/* BOX INPUT E BOTAO */

.box {
  width: 250px;
  display: flex;
  height: 44px;
  border-color: #484848;
  border-style: solid;
  border-bottom-width: 1px;
  border-top-width: 0;
  border-right-width: 0;
  border-left-width: 0;
}


.box input {
  outline: 0;
  width: 230px;
  height: 20px;
  border: 0;
  background: transparent;
}

.box_bt {
  margin-top: 28px;
  cursor: pointer;
}

.box_bt:hover {
  color: #1E90FF;
}


.box.focused .control-label {
  opacity: 1;
  transform: scale(0.75);
}

.form_campos_box {
  color: #484848;
  z-index: 1;
  align-self: flex-end;
  font-size: 15px;
  padding: 5px;
  position: relative;
  display: block;
  outline: none;
}

.box.focus, .form-group.focus {
     border-color: #1E90FF;}

.box:hover, .form-group:hover {
     border-color: #1E90FF;}

/* FIM BOX INPUT E BOTAO *

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='form-group'><labelclass='control-label'for='numParcelas'>PARCELAS*</label><inputtype='text'class='form_camposform_campos_numeros'id='numParcelas'name='numParcelas'></div><br><br><br><br><br><br><divclass='box'><labelclass='control-label'for='auto'>FORNECEDOR*</label><inputtype='text'class='form_campos_box'id='auto'name='nome'><divclass="box_bt">
        <i class='demo-icon'>X</i>
    </div>
</div>

score 0 · Answer 4

I made some simple changes to your Fiddle and it worked perfectly:

$('.form_campos').on('focus blur', function(e) {
  $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');

$('.form_campos_box').on('focus blur', function(e) {
  $('.box').toggleClass('focused');
});

    body {
      font-family: Verdana;
      font-size: 12px;
    }
    
    .form-group {
      position: relative;
      display: flex;
      height: 45px;
      float: left;
      margin-right: 2px;
    }
    
    .control-label {
      opacity: 0.4;
      pointer-events: none;
      position: absolute;
      transform: translate3d(5px, 22px, 0) scale(1);
      transform-origin: left top;
      transition: 240ms;
      z-index: 2;
    }
    
    .form-group.focused .control-label {
      opacity: 1;
      transform: scale(0.75);
    }
    
    .form_campos {
      height: 20px;
      color: #484848;
      z-index: 1;
      align-self: flex-end;
      font-size: 15px;
      padding: 5px;
      outline: none;
      border-color: #484848;
      border-style: solid;
      border-bottom-width: 1px;
      border-top-width: 0;
      border-right-width: 0;
      border-left-width: 0;
      background: transparent;
    }
    
    .form_campos:hover,
    .form_campos:focus {
      border-color: #1E90FF;
    }
    
    .form_campos_numeros {
      width: 123px;
    }
   
   
   
    /* BOX INPUT E BOTAO */
    
    .box {
      width: 250px;
      display: flex;
      height: 44px;
      border-color: #484848;
      border-style: solid;
      border-bottom-width: 1px;
      border-top-width: 0;
      border-right-width: 0;
      border-left-width: 0;
    }
    
    .box input {
      outline: 0;
      width: 230px;
      height: 20px;
      border: 0;
      background: transparent;
    }
    
    .box_bt {
      margin-top: 28px;
      cursor: pointer;
    }
    
    .box_bt:hover {
      color: #1E90FF;
    }
    
    .box:hover, .box.focused {
      border-color: #1E90FF;
    }
    
    .box.focused .control-label {
      opacity: 1;
      transform: scale(0.75);
    }
    
    .form_campos_box {
      color: #484848;
      z-index: 1;
      align-self: flex-end;
      font-size: 15px;
      padding: 5px;
      position: relative;
      display: block;
      outline: none;
    }
    /* FIM BOX INPUT E BOTAO */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><divclass='form-group'><labelclass='control-label'for='numParcelas'>PARCELAS*</label><inputtype='text'class='form_camposform_campos_numeros'id='numParcelas'name='numParcelas'></div><br><br><br><br><br><br><divclass='box'><labelclass='control-label'for='auto'>FORNECEDOR*</label><inputtype='text'class='form_campos_box'id='auto'name='nome'><divclass="box_bt">
    <i class='demo-icon'>X</i>
  </div>
</div>