Home Change "display:none" to "display:flex" when you press enter in the input field

Questions

Change "display:none" to "display:flex" when you press enter in the input field

July 3, 2022

How can I change display:none to display:flex to my div when I click enter in my first input field in the div?

Here is the code: https://pastebin.com/NA9eJjM5

<div class="checkoutDiv" style=" display:flex;">
<input type="text" name="ean" id="focus" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
<input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
</div>

<div class="checkoutDiv" style="display: none;">
<input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
<input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
</div>

<div class="checkoutDiv" style="display: none;">
<input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
<input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
</div>


<script>
function callback(e){
if (
    $(this).index() == $('#checkout div[display="flex"]').length - 1
        &&
    e.which == 13
) {
    $(this).next('div[display="none"]').prop("display", "flex").keypress(callback)
    }
}

$('#checkout div[display="none"]').keypress(callback)
</script>

These Div’s are in <div id="checkout">

Edit:

I changed it to:

function callback(e){
    if (
        $(this).index() == $('.checkoutDiv').attr('style', 'display: flex').length - 1
            &&
        e.which == 13
    ) {
        $(this).next('.checkoutDiv').attr('style', 'display: flex').keypress(callback).focus();
    }
}

$('.checkoutDiv').keypress(callback)

but it changes the display attribute to all next divs with class checkoutDiv.. How to make it to change the display to next div only?

>Solution :

Consider using Classes to assign your Styles instead of using the style attribute. This gives you more ability to manage and select elements in your script.

Example:

$(function() {
  function callback(e) {
    if ($(this).index() == $('#checkout div.flex').is(":last") &&
      e.which == 13) {
      $("#checkout div.hidden:eq(0)").toggleClass("hidden flex");
      $("div.flex").last().find("input:eq(0)").addClass("focus").focus();
    }
  }

  $('#checkout').on("keypress", ".focus", callback);
})

.flex {
  display: flex;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkout">
  <div class="checkoutDiv flex">
    <input type="text" name="ean" class="focus" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
    <input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
  </div>

  <div class="checkoutDiv hidden">
    <input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
    <input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
  </div>

  <div class="checkoutDiv hidden">
    <input type="text" name="ean" placeholder="Баркод" style="width: 250px; margin:10px;" autocomplete="off" autofocus>
    <input type="text" name="num" value="1" style="width: 50px; margin:0; text-align: center;">
  </div>
</div>

As I mentioned, there are lots of changes.

I updated the IF statement to make use of .is() to make sure the event was happening on the last input.

To ensure the that the callback was used for all of them as needed, I used .on() which can delegate the callback.

See More: