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

查看：28
本文介绍了将关键事件侦听器添加到最后生成的输入字段并在键入后停止的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我单击一个按钮时，我的 dom 中将生成一个包含不特定数量的输入字段的表单以及一个空的输入字段.

我想向最后生成的空输入字段添加类似按键事件的内容.

当我开始输入时，在最后一个空的输入字段中，应该附加另一个输入字段.这个新附加的输入字段应该得到按键事件监听器，而我所在的输入字段应该松开按键事件监听器.

这是我是如何做到的(添加为代码片段):

$(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 + '">

');});

<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

到目前为止，这工作正常.但我当然希望这仅在第一次按键时发生.

  1. 按下一个键后，它应该停止添加文本字段.但是当我在新添加的(最后一个)文本字段中输入内容时，它应该再次添加一个文本字段.但按下一个键等后只有 1 个文本字段...

  2. 输入后我无法停止事件侦听器.

  3. Keypress 是否适用于移动设备?

解决方案

这种处理程序的优点在于，如果您使用新的最后一个元素更新 DOM，处理程序会立即切换到新元素 - 无需使用 .off 或 .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 class="elementCtr"><input id="service_1" type="text" class="service-input" value="" name="1">

<div class="elementCtr"><input id="service_2" type="text" class="service-input" value="" name="2">

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆