How to identify Focus in a div?

Asked

Viewed 1,845 times

1

Galera mounted an input system with the same layout of android.

Everything works perfectly on input but the input supplier stays within a div, because I have to add a button instead of x.

The problem is that when I get the mouse on it the border line turns blue, and when I leave it turns black again.

I need to leave it equal to the parcels input, I mean when it is clicked it has to be blue regardless if the mouse is on it or not.

Just follow 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 jquery html css

  • Assigns directly to the CSS the :focus at the input, without jQuery. Example: https://jsfiddle.net/ojgdkjtc/

  • I don’t know, I need to keep the layout I built

4 answers

1

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

For having a type indicator index, i.e., by index, where 0 is the first item, the attribute tabindex 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 will help you with something or serve your project!

Useful links:
"How to Focus div?" in Stackoverflow.com
"Change Focus into particular div" in Stackoverflow.com
"Tabindex | HTML" in Mozilla Developer Network

  • well I tried to do this way, but how much I click on the input inside the div it is not selected. dry the code for you to see https://jsfiddle.net/fcfhxznb/

  • @Hugo, you need to assign the method to a button or another event. In my code, I assigned a button and in the event onclick he called the method by the attribute id button.

  • have you send me an example by jsfiddle, with the code I posted in my previous comment.

0

Hugo, the solution here is quite simple, you should come to see each of these set of elementos as a componente, for example the elementos down 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 the i.demon-icon form a single component, and all are grouped by div.box

in this case it is interesting that actions in which either one of the elements is reflected in the whole component, for this we will add classes to the 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 above script, whenever the input#auto is with Phocus, the div.box will own the class md-focus, and when the input#auto, to div.box will own the class md-has-value.

then now instead of setting the color with 

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

you will setar with 

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

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

in the example above I am applying the color when the input gains Focus, and not how much the mouse passes over it, because this is closer to the behavior of Android...

In any case, you can override the events focusin and focusiout, for mouseenter and mouseleave...

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

  • well I tried to do here, but not me right. has how to check if I did something wrong. Following link: https://jsfiddle.net/bp3fsk3b/2/

  • @Hugo, I made some adjustments, I ended up confusing the name of the events... Jsfiddle

  • ok and that’s right, but the animation is not working anymore, it has to be equal to 1st input, when you click the text goes up, and the text cannot change the color of the text, only the border. You can fix it?

  • @Hugosabrina, as previously suggested, includes the events mouseenter and mouseleave, then I started doing the toggle of another class in the div.box, in the case md-mouse... both the md-focus and md-mouse are turning the embroidery blue... but only the md-focus makes the label more opaque. Jsfiddle

  • good then there is no way to do the animation with the blue border?

0

That’s the result you want?

Sorry to reactivate, I got confused with the dates and I thought it was this year. Now that I saw Feb 2016. :|

What I moved was to add another class to toggle of jquery for each div, and create these classes in the css. 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>


<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>

  • 1

    It is OK to answer old questions, as long as your answer is another alternative to existing ones :)

0

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>
<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>

  • This link may be a good suggestion, but your reply will not be valid if one day the link crashes. In addition, it is important for the community to have content right here on the site. It would be better to include more details in your response. A summary of the content of the link would be helpful enough! Learn more about it in this item of our Community FAQ: We want answers that contain only links?

  • Very interesting, I am still very new here and the will to help sometimes bumps into these details, I will edit my answer!

  • No problem, the intention is always to improve

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.