当我单击一个Button时,我的dom中将生成一个非特定数量的输入字段的形式加上一个空输入字段。
我想在最后生成的空输入字段中添加类似按键事件的内容。
当我开始输入时,在最后一个空输入字段中,应附加另一个输入字段。 这个新的附加输入字段应该得到keypress eventlistener,我所在的输入字段应该松开keypress eventlistener。
这是我做的方式( 编辑:添加为代码片段):
$(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>这到目前为止工作正常。 但是我当然希望只有第一次按键才会发生这种情况。
按下一个键后,它应该停止添加文本字段。 但是当我在新添加的(最后一个)文本字段中输入内容时,它应该再次添加文本字段。 但按键等后只有1个Textfield ...
输入后我无法停止事件监视器。
Keypress是否适用于移动设备?
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?
最满意答案
关于这种处理程序的好处是,如果使用新的最后一个元素更新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> <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>一种可能的增强是检测空字符串并删除新添加的输入。
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.
更多推荐
发布评论