jQuery和输入keydown事件困难

Question

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

除了点击<input>中的“ enter”外，它工作正常。 当前，除非列表中只有一项，否则它始终会引发Remove.click事件处理程序。 我不知道为什么。 我该如何抑制呢？

这是完整的jQuery。 我试图解决“输入”问题的尝试已被注释掉，并且不起作用。 我怀疑我可以更好地设计此代码。 如果您看到改进，我很乐意听到。

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是我拥有的另一个脚本。）

更新 ：标记看起来像：

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

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

实际激活列表的脚本：

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

更新2 ：设置如下所示的keydown可以防止“ Remove”按钮的输入出现问题：

    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处理程序被触发。 }）;

Answer 1

在keup docs中 ，它实际上有一个检测“ enter”键是否被敲击的具体示例。 这是一个摘录，经过略微修改以（希望）可以更轻松地放入您的代码中：

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

您希望将其放置在创建元素时放置在元素中的处理程序中，但是这个基本思想应该可以正常工作。

Answer 2

这应该工作：

$('input').keydown(function(e) {    
    if (e.keyCode == 13) { return false; }
});

您只需跟踪ENTER键，并在按下该事件时将其终止。

请注意， submit()方法仅用于<form>元素，而不用于其字段。

Answer 3

无需jQuery。 只需覆盖页面中所有表单的onsubmit事件。

var inputs=document.all.tags('form')||document.getElementsByTagName('form');
for(x=0;x<inputs.length;x++){
    inputs[x].onsubmit=function(){
        return false;
    }
}