JQuery: Keyup, как мне предотвратить поведение по умолчанию стрелки (вверх и вниз) и ввести ключ?

JavaScript (JQuery)

$('input').keyup(function(e)
{
    var code = e.keyCode ? e.keyCode : e.which;

    switch(code)
    {
        case 38:
        break;

        case 40:
        break;

        case 13:
        break;

        default:
        return;
     }
 });

HTML

<form method="post" action="/">
<input type="text" name="text" />
<button type="submit">Submit</button>
</form>

У меня есть 2 проблемы:

1) Каретка не должна двигаться, когда я нажимаю клавишу вверх.

Например, в Chrome, когда я нажимаю кнопку вверх, он перемещает курсор влево. Но у меня проблема только в Chrome. Он отлично работает в FF.

2) Когда я нажимаю клавишу введите, я не хочу, чтобы форма была отправлена.

Кстати, я хочу, чтобы это работало с keyup, а не нажатием клавиши.

Буду признателен за любые идеи. Спасибо.

Ответ 1

Я не думаю, что вы можете preventDefault() (это то, что вам нужно использовать, чтобы остановить браузер от выполнения действие по умолчанию для ключа) в событии keyup - оно запускается после того, как событие по умолчанию уже произошло. Подробнее см. эту страницу.

Если вы можете, рассмотрите вместо этого keydown.

Что касается прекращения отправки формы, вы можете привязать к submit event и return false;, когда отправка не была вызвана по кнопке отправки (см. jQuery: как получить, какую кнопку нажали на отправку формы?, как определить это).

С другой стороны, вы также можете привязать к keypress для формы и при нажатии Enter отменить отправку таким же образом (непроверенный код):

$('form').keypress(function(e){
    if(e.which === 13){
        return false;
    }
});

Ответ 2

Вместо разрыва вы можете попробовать вернуть false или заставить его вызвать функцию и использовать http://api.jquery.com/event.preventDefault/

Например: case 40: function(e) {e.preventDefault;}

Кроме того, $('form').submit(function() {return false}); полностью прекратит отправку, но я не уверен, что вы после?

Ответ 3

Чтобы предотвратить отправку формы при нажатии пользователем, вам необходимо связать функцию отправки вашей формы и вернуть значение false, если триггер события был нажатой кнопкой ввода.

для кнопки Up/Down нажмите, e.preventDefault();

Ответ 4

Самый надежный метод - это комбинация e.preventDefault(), e.stopPropagation() и return false;

Вот как это выглядит:

var override_keys = [13, 38, 40];

$('input').keyup(function(e){
  var code = e.keyCode ? e.keyCode : e.which;

  if ($.inArray(code, override_keys)) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }
});

Кроме того, чтобы предотвратить отправку формы с помощью ключа ввода, вы должны проверить форму submit событие:

$('#form').submit(function(e){
  var code = e.keyCode ? e.keyCode : e.which;

  if ($.inArray(code, override_keys)) {
    return false;
  }
});

Ответ 5

Кажется, что вы действительно можете остановить значение по умолчанию для 'ENTER' при использовании keyup();... jQuery api пишет об этом здесь: http://api.jquery.com/keyup/

Вот как вам нужно:

$('textarea').keyup(function(e) {
   // your code here
}).keydown(function(e){
   // your e.which for ENTER.
});