jQuery UI對話框在輸入KeyPress時更改URL

Question

我正在嘗試使用AJAX提交表單，該表單是jQuery UI對話框的內容。

我使用與jQuery文檔中相同的代碼

但是我修改了表單，所以只有一個文本輸入，所以表單看起來像這樣：

<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中input#answer asd並按Enter時，它將使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，如何刪除該功能？ 它在哪里定義？

簡而言之，我希望Enter鍵只能執行我想要的操作。

謝謝你的幫助 ！

編輯：

可以在鼠標jQuery.dialog();上起作用的按鈕已添加到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的回答），這可能是您期望的。 有關event.preventDefault()更多信息，請參見mdn 。

$('#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();
    }
});

Answer 2

像你一樣

<form>
<!-- <form onsubmit="return false"> is an optional -->
<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>

---

//jQuery Version
$('form').submit(function(){
    return false;
});
// javascript
document.getElementById('my-form').onsubmit = function() {
    return false;
}
$('#answer').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
        e.preventDefault();
        //alert("enter pressed on answer input");
        submit_with_ajax(answer);
    }
});

因此，這里的表單根本不會提交。.以便您可以執行AJAX提交或請求。

希望能幫助到你...

Answer 3

DEMO

嘗試這個，

在輸入答案中輸入值，然后單擊Enter

$(document).ready(function () {
     $(document).on('keypress',function(e)
               {
                if(e.which==13 && $("#answer").val().length>0)
                {
                    alert("hi"); // do your ajax call here
                }
          });
});

希望這可以幫助