jquery：阻止表单提交

Question

嘿伙计们， 我有一个可以用向上和向下键影响的表单。

如果没有该代码，它只是一个触发正常操作的正常输入搜索字段。但是我想知道当我使用向上和向下箭头键更改输入字段的值时如何停止默认行为。

看看这个： http://jsfiddle.net/3UHVY/7

我只希望在以下情况下发生警报我使用向上和向下键更改该框的值，否则不应触发任何警报，并且应正常提交表单。但是，如果通过箭头键更改输入值，则应触发警报并且不应提交表单。

知道如何解决这个问题吗？

Answer 1

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

Answer 2

我不完全确定你想要发生什么，但是以下 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 中 声明）。

Answer 3

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 （以停止
  事件）按上/下键后，
  停止默认的向上/向下行为
  （自动完成建议）
• 您可以始终将changedByUpDown 设置为 false
  当用户输入不同的内容时
  比向上/向下，所以形式是“新鲜的”，
• 你当然可以添加
  按下时提交表单的代码
  输入 (13)