Предотвращение поведения ключа 'return' по умолчанию в редактируемых полях HTML5

#jquery #html #local-storage #contenteditable

#jquery #HTML #локальное хранилище #редактируемый контент

Вопрос:

Я создаю базовый список задач, используя localStorage amp; Contenteditable, и когда я нажимаю enter (в Chrome), браузер добавляет новую строку. Я хочу предотвратить это поведение по умолчанию и отправить задачу. Размытие jQuery удаляет фокус, но только после добавления новой строки. Я пытался использовать,

 return false
e.preventDefault();
e.stopPropagagtion();

Но ни одно из них не сработало, есть ли способ предотвратить это?

 $('.taskContent').keyup(function(e) {
        if(e.keyCode == 13) {
            $('.task').removeClass('editing');
            $('.task').children('a').fadeTo('medium', 0.5, function() {
                localStorage.setItem('tasksData', tasks.innerHTML);
            });
            $('.taskContent').blur();
        }
    });

1. Я не уверен, возможно ли то, что вы хотите сделать, но я бы рекомендовал вам не делать этого, даже если это возможно. В многострочном окне редактирования пользователи ожидают, что ‘return’ перейдет к следующей строке. Отправка только запутает и разозлит их.

2. Спасибо, я согласен с вашим комментарием с точки зрения UX, но на самом деле я не использую его в многострочном окне редактирования. Я использую его в элементе раздела HTML5, поэтому я думаю, что все в порядке, кто-нибудь еще согласен / не согласен, хотел бы услышать ваши комментарии от semantic POV?

Ответ №1:

Я сталкивался с этой проблемой раньше, и я думаю, что проблема заключается в том, что событие срабатывает при нажатии клавиши, а не при нажатии клавиши return / enter / tab и других клавиш «специальной функции».

Попробуйте изменить его на

 $('.taskContent').keydown(function(e){});

Ответ №2:

Попробуйте использовать событие keyDown, потому что к моменту ввода символа символ был вставлен.