使用jQuery和输入keydown事件很困难 [英] Difficulty with jQuery and input keydown event

问题描述

我正在制作一个简单的JavaScript增强列表。我希望它是一个输入列表，每个输入都带有一个添加和删除按钮。如果用户点击添加，则会添加新的 li 。如果用户点击'删除'，那 li 将被删除。

I am making a simple JavaScript enhanced list. I want it to be a list of inputs, each with an 'Add' and 'Remove' button. If the user clicks 'Add', a new li will be added. If the user clicks 'Remove', that li will be removed.

它工作正常，除了点击在< input> 中输入。目前，除非列表中只有一个项目，否则它总是会触发 Remove.click 事件处理程序。我不知道为什么。我怎样才能压制这个？

It works fine, except for hitting "enter" in an <input>. Currently, it always causes the Remove.click event handler to fire, unless there's only one item in the list. I'm not sure why. How can I suppress this?

以下是完整的jQuery。我试图解决输入问题已被注释掉，并且不起作用。我怀疑我可以更好地设计这些代码;
$ b

Here is the complete jQuery. My attempt to fix the "enter" issue is commented out, and it doesn't work. I suspect that I could be designing this code better; if you see an improvement I'd love to hear it.

function make_smart_list(list)
{
    var ADD_CLASS = 'foo-widget-Add';
    var REMOVE_CLASS = 'foo-widget-Remove';

    var jq_list = $(list);
    jq_list.parents('form').submit(function() {
        return false;    
    });

    function refresh_handlers() {
        jq_list.find(sprintf('.%s, .%s', REMOVE_CLASS, ADD_CLASS)).unbind('click');
        // jq_list.find('input').unbind('submit');
        // 
        // jq_list.find('input').submit(function() {
        //     var jq_this = $(this);
        //     var next_button = jq_this.nextAll('button');
        //     if (next_button.hasClass(ADD_CLASS)) {
        //         next_button.nextAll('button').click();
        //         return;
        //     }
        //     
        //     if (next_button.hasClass(REMOVE_CLASS)) {
        //         return false;
        //     }
        //     
        // });

        jq_list.find("." + REMOVE_CLASS).click(function() {
            var jq_this = $(this);
            jq_this.parent().remove();
            refresh_handlers();
            return false;
        });

        jq_list.find("." + ADD_CLASS).click(function() {
            var jq_this = $(this);
            if (jq_this.prevAll('input').val() == '') {
                return;
            }

            jq_this.parent().clone().appendTo(jq_this.parent().parent());
            jq_this.parent().next().find('input').val('').focus();
            jq_this.removeClass(ADD_CLASS).addClass(REMOVE_CLASS);
            jq_this.text('Remove');
            refresh_handlers();
            return false;
        });
    }

    refresh_handlers();
}

（ sprintf 是）

更新：标记看起来像：

Update: The markup looks like:

<ul id="id_bar" class="foo-widget-list">
    <li><input value=""><button class="foo-widget-Remove">Remove</button></li>
    <li><input value=""><button class="foo-widget-Add">Add</button></li>
</ul>

这是包含其他组件的表单的一部分，但我关心的只是此部分。

This is part of a form that contains other components, but all I'm concerned about is this part.

脚本实际激活列表：

Script to actually activate the list:

$(function() {
    $.each($('.foo-widget-list'), function(index, item) {
        make_smart_list(item) 
    });
});

更新2 ：如下设置keydown可防止输入问题通过删除按钮：

Update 2: Setting the keydown as follows works to prevent problems with inputs by "Remove" buttons:

    jq_list.find('input').keydown(function(e) {
        var next_button = $(this).nextAll('button');
        if (e.keyCode == ENTER_KEYCODE && next_button.hasClass(REMOVE_CLASS)) {
            return false;
        }

但按下Enter键，同时通过添加按钮专注于输入，仍然会导致 remove.click 处理程序正在被解雇。
}）;

But pressing enter while focused on an input by an "Add" button still results in the remove.click handler being fired. });

推荐答案

在 keup文档中，它实际上有一个检测输入键击中的特定示例。这里有一段摘录，稍加修改（希望）可以使它更容易放入代码：

In the keup docs, it actually has a specific example for detecting the hitting of the 'enter' key. Here's an excerpt, slightly modified to (hopefully) make it easier to put into your code:

$([element_selector]).keyup(function(event) {
  if (event.keyCode == '13') {
     event.preventDefault();
   }
  // other keyup code here
});

您可能希望将它放入一个处理程序中，当您创建它时，但这个基本的想法应该可以。

You'll want to put this in a handler that you put on an element when you create it, but this basic idea should work okay.

这篇关于使用jQuery和输入keydown事件很困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！