添加关键事件监听到最后生成的输入字段中键入后停止 [英] Add key eventlistener to last generated input field and stop it after typing

问题描述

当我点击一个按钮，就会在我的DOM加空输入字段生成输入域的非特异性数的形式。

我要补充一点像一键preSS事件到最后产生的空输入栏。

当我开始打字，到最后一个空输入栏，另一个输入字段应该追加。这种新的附加输入字段应该拿到钥匙preSS事件监听输入框的我在宜宽松的关键preSS的EventListener。

下面是我是如何做到的（修改添加为code段）：

\r

\r

$（document.body的）。在（输入，.service-输入：去年功能（E）{\r
    VAR lastInput = $（。elementCtr.input-CTR输入）。最后（）\r
            inputID =（parseInt函数（lastInput.attr（'名'））+ 1）;\r
    $（＃providerServicesForm .inputs）追加（'＆LT; D​​IV CLASS =elementCtr投入CTR＆GT;＆LT;输入ID =SERVICE_'​​+ inputID +'类型=文本值=NAME = '+ inputID +'＆GT;＆LT; / DIV＆GT;'）;\r
  }）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.9.1/jquery.min.js\"></script>\r
＆LT;形式接收字符集=UTF-8NAME =providerServicesFormID =providerServicesForm方法=后＆GT;\r
  ＆LT; D​​IV CLASS =输入＆GT;\r
    ＆LT; D​​IV CLASS =elementCtr投入CTR＆GT;＆LT;输入类型=文本名称=1值=测试1ID =SERVICE_1级=服务输入＆GT;＆LT; / DIV＆GT;\r
    ＆LT; D​​IV CLASS =elementCtr投入CTR＆GT;＆LT;输入类型=文本名称=2值=test2的ID =service_2级=服务输入＆GT;＆LT; / DIV＆GT;\r
    ＆LT; D​​IV CLASS =elementCtr投入CTR＆GT;＆LT;输入类型=文本名称=3值=TEST3ID =service_3级=服务输入＆GT;＆LT; / DIV＆GT;\r
    ＆LT; D​​IV CLASS =elementCtr投入CTR＆GT;＆LT;输入类型=文本名称=3值=ID =service_3级=服务输入＆GT;＆LT; / DIV\r
  ＆LT; / DIV＆GT;\r
＆LT; /形式为GT;

\r

\r

\r

这工作正常为止。
但当然，我想，出现这种情况只有在第一个关键preSS。

1. pressing一键后，应停止添加文本框。但是，当我在新添加的（最后）文本框输入一些东西，应该再次添加一个文本框。但只有1 $ P $文本字段后一个pssing等关键...




2. 我不能键入后停止的EventListener。




3. 是否使用移动设备的关键preSS工作？

解决方案

有关这种处理器的伟大的事情，就是如果你更新一个新的最后一个元素的DOM，处理程序立即切换到新的元素 - 无需使用 .off 或。一是。

\r

\r

$（document.body的）。在（输入，.service-输入：最后一个，函数（）{\r
    VAR inputID =（parseInt函数（$（本）.attr（'名'））+ 1）;\r
    $（＃providerServicesForm .inputs）追加（'＆LT; D​​IV CLASS =elementCtr投入CTR＆GT;＆LT;输入ID =SERVICE_'​​+ inputID +'级=服务输入TYPE =文本VALUE =NAME =+ inputID +'＆GT;＆LT; / DIV＆GT;'）;\r
  }）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.9.1/jquery.min.js\"></script>\r
＆LT;形式接收字符集=UTF-8NAME =providerServicesFormID =providerServicesForm方法=后＆GT;\r
  ＆LT; D​​IV CLASS =输入＆GT;\r
    ＆LT; D​​IV CLASS =elementCtr＆GT;\r
      ＆LT;输入ID =service_0类型=文本级=服务输入VALUE =NAME =0＆GT;\r
    ＆LT; / DIV＆GT;\r
    ＆LT; D​​IV CLASS =elementCtr＆GT;\r
      ＆LT;输入ID =SERVICE_1类型=文本级=服务输入VALUE =NAME =1＆GT;\r
    ＆LT; / DIV＆GT;\r
    ＆LT; D​​IV CLASS =elementCtr＆GT;\r
      ＆LT;输入ID =service_2类型=文本级=服务输入VALUE =NAME =2＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; /形式为GT;

\r

\r

\r

一个可能的改进是检测一个空字符串，并删除新添加的输入。

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.

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

2. I can't stop the eventlistener after typing.

3. Does Keypress work with mobile devices?

解决方案

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.

这篇关于添加关键事件监听到最后生成的输入字段中键入后停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！