Add key eventlistener to last generated input field and stop it after typing

问题

When I click a Button, a form of an unspecific number of input fields will be generated in my dom plus an empty input Field.

I want to add something like a keypress event to the last generated empty input field.

When I start typing, into the last empty input field, another input field should append. This new appended input field should get the keypress eventlistener and the input field I am in should loose the keypress eventlistener.

Here's how I did it(EDIT: added as code snippet):

$(document.body).on("input", ".service-input:last", function (e) {
    var lastInput = $(".elementCtr.input-ctr input").last(),
            inputID = (parseInt(lastInput.attr('name')) + 1);
    $("#providerServicesForm .inputs").append('<div class="elementCtr input-ctr"><input id="service_' + inputID + '" type="text" value="" name="' + inputID + '"></div>');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form accept-charset="UTF-8" name="providerServicesForm" id="providerServicesForm" method="post">
  <div class="inputs">
    <div class="elementCtr input-ctr"><input type="text" name="1" value="test1" id="service_1" class="service-input"></div>
    <div class="elementCtr input-ctr"><input type="text" name="2" value="test2" id="service_2" class="service-input"></div>
    <div class="elementCtr input-ctr"><input type="text" name="3" value="test3" id="service_3" class="service-input"></div>
    <div class="elementCtr input-ctr"><input type="text" name="3" value="" id="service_3" class="service-input"></div
  </div>
</form>

This works fine so far. But of course I want that this happens only with the first keypress.

After pressing a key, it should stop adding textfields. But when I type something in to the new added (last) textfield it should add a textfield again. But only 1 Textfield after pressing a key etc...
I can't stop the eventlistener after typing.
Does Keypress work with mobile devices?

回答1:

The great thing about this sort of handler, is if you update the DOM with a new last element, the handler immediately switches to the new element - no need to use .off or .one.

$(document.body).on("input", ".service-input:last", function () {
    var inputID = (parseInt($(this).attr('name')) + 1);
    $("#providerServicesForm .inputs").append('<div class="elementCtr input-ctr"><input id="service_' + inputID + '" class="service-input" type="text" value="" name="' + inputID + '"></div>');
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form accept-charset="UTF-8" name="providerServicesForm" id="providerServicesForm" method="post">
  <div class="inputs">
    <div class="elementCtr">
      <input id="service_0" type="text" class="service-input" value="" name="0">
    </div>
    <div class="elementCtr">
      <input id="service_1" type="text" class="service-input" value="" name="1">
    </div>
    <div class="elementCtr">
      <input id="service_2" type="text" class="service-input" value="" name="2">
    </div>
  </div>
</form>

One possible enhancement is to detect an empty string and remove the newly added input.

回答2:

If you only want it to happen for once, why not create a counter and set it to 0. After it had happened, you can increase the counter to 1.

var counter=0;

$(document.body).on("keypress", $(".elementCtr.input-ctr input").last(), function () {
    if(counter==0){

        //put your logic here

        counter++;
    }
})

来源：https://stackoverflow.com/questions/29631069/add-key-eventlistener-to-last-generated-input-field-and-stop-it-after-typing

标签

append

keypress

stoppropagation