Сложность с jQuery и вводом события нажатия клавиш

Question

Я делаю простой расширенный список JavaScript. Я хочу, чтобы это был список входов, каждый с кнопками «Добавить» и «Удалить». Если пользователь нажимает «Добавить», будет добавлен новый li. Если пользователь нажимает «Удалить», то li будет удалено.

Работает нормально, за исключением нажатия "enter" в <input>. В настоящее время он всегда вызывает обработчик события 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 : настройка клавиш следующим образом работает для предотвращения проблем со входами с помощью кнопок «Удалить»:

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

Но нажатие клавиши ввода и фокусировка на вводе кнопкой «Добавить» по-прежнему приводит к срабатыванию обработчика remove.click. });

Answer 1

В keup docs на самом деле есть конкретный пример для обнаружения нажатия клавиши ввода.Вот выдержка, слегка измененная, чтобы (надеюсь) упростить вставку в ваш код:

$([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; }
});

Вы просто отслеживаете клавишу ВВОД и уничтожаете событие, если оно было нажато.

Обратите внимание, что метод 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;
    }
}