JQuery: запретить отправку формы - PullRequest
Новая
       11

JQuery: запретить отправку формы

2 голосов
/ 16 января 2011

Эй, ребята, у меня есть форма, на которую можно влиять клавишами вверх и вниз.

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

проверить это: http://jsfiddle.net/3UHVY/7

Я хочу, чтобы оповещение появлялось только в том случае, если я изменил значение поля с помощью клавиш вверх и вниз, в противном случае оповещение не должно срабатывать и форма должна отправляться в обычном режиме. Однако, если входное значение изменяется с помощью клавиш со стрелками, ПРОСТО ПРЕДУПРЕЖДЕНИЕ должно быть запущено, и форма не должна быть отправлена.

есть идеи, как это решить?

Ответы [ 3 ]

1 голос
/ 16 января 2011

Я не совсем уверен, что вы хотите, но следующий jQuery: 

$('.s').keydown(
    function(e) {
        var keyPreesed = e.keyCode;

        if (keyPreesed == 38) {
            var msg = "Up was pressed.";
            $(this).val(msg);
            alert(msg);
        }
        else if (keyPreesed == 40) {
            var msg = "Down was pressed.";
            $(this).val(msg);
            alert(msg);
        }
        else {
            // meither 'up' nor 'down' was pressed, do whatever

            // $(this).closest('form').submit(); // <- this (uncommented) will trigger the form's submission.
        }
    });

JS Fiddle demo

Проблема в том, что я не уверен, где вы хотите инициировать отправку, хотя я предполагал, что вы хотите, чтобы отправка происходила, если не нажата ни вверх, ни вниз, следовательно, она находится в else заявление).

1 голос
/ 16 января 2011

http://jsfiddle.net/3UHVY/14/

var ok=0;
$(window).keydown(function(e) {

$('.s').focus(); 
switch ( e.keyCode ) {
case 38: // Up
    $('.s').val('Up pressed');
    ok=1;
    break;
case 40: // Down
    $('.s').val('Down pressed'); 
    ok=1;
    break;
case 13: // Enter
    if(ok)
    alert($('.s').val());
    break;
default:
ok=0;
break;
}
});
1 голос
/ 16 января 2011 
function FormHandler() {
  var changedByUpDown = false;
  this.onKeyDown = function(event) {
    if (event.keyCode == 38 || event.keyCode == 40) {
      changedByUpDown = true;
    }
  };
  this.onSubmit = function(event) {
    if (changedByUpDown) {
      alert('Changed by up/down');
      return false;
    }
    return true;
  }
}

var fh = new FormHandler();
$('#search_form').submit(fh.onSubmit);
$('#searchsubmit').keydown(fh.onKeyDown);

Несколько замечаний:

  • вы можете вернуть false (чтобы остановить событие) после нажатия вверх / вниз, чтобы остановить поведение по умолчанию вверх / вниз (предложения по автозаполнению))
  • вы можете всегда устанавливать значение параметра changeByUpDown в значение «ложь» всегда, когда пользователь вводит что-то отличное от вверх / вниз, поэтому форма «свежая»
  • вы, конечно, можете добавить код для отправки формы при нажатии клавиши ввода(13)
...