javascript - jQuery UI 对话框在 Enter KeyPress 上更改 URL

Question

我正在尝试使用 AJAX 提交表单，该表单是 jQuery UI 对话框的内容。

我使用与 jQuery's documentation 中相同的代码

但是我修改了表单，所以只有一个文本输入，所以表单看起来像这样:

<form>
  <fieldset>
    <label for="answer"><strong>Your Answer : </strong></label>
    <input type="text" name="answer" id="answer" class="text ui-widget-content ui-corner-all" />    
  </fieldset>
  </form>

当我单击确定(或创建用户)按钮时，它会起作用，即使用 AJAX 提交答案，但我也希望它在按下 Enter 键时起作用。

现在，当我在 input#answer 中键入 asd 并按回车键时，它会生成这样的 URL:

mysite.com/?answer=asd

我尝试添加函数:

  $('#answer').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          alert("enter pressed on answer input");
    }
});

这一次它会提示 “enter pressed on answer input” 然后转换 URL。然而，我不希望它修改 URL，我该如何删除该功能？在哪里定义的？

简而言之，我希望回车键只执行我希望它执行的操作。

感谢您的帮助!

编辑:

在 jQuery.dialog(); 中添加鼠标点击时起作用的按钮，如下所示:

$( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        Answer: function() {
            var answer = $("#dialog-form #answer").val();
            alert("your answer : "+answer);
                    submit_with_ajax(answer);
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }


      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
        alert("asd");
      }
    });

Answer 1

您可以使用 event.preventDefault() 阻止事件的默认操作。我不是 100% 确定表单在 jQuery-ui 中的样子以及是否阻止按键的默认设置。作为替代方案，您可以阻止 submit 事件的默认操作，正如您可能期望的那样，该事件会阻止提交表单(根据 Gokul 的回答)。参见 mdn有关 event.preventDefault() 的更多信息。

$('#answer').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          e.preventDefault();
    }
});

-- 或--

$('whatevertheuiformis').on( 'submit', function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          e.preventDefault();
    }
});