Question

我正在尝试调出一个jQuery UI对话框来响应表单输入。考虑：

<html>
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
      <script src="checkLogin.js"></script>
   </head>
   <body>
      <form>
         <label>User Name:</label><input onkeydown="checkSubmitKey(event)"><br>
         <input id="submit" name="submit" type="button" onclick="checkLogin()" value="Submit">
      </form>
      <div id="dialog" title="Alert" style="display: none;"></div>
   </body>
</html>

其中checkLogin.js是：

function checkSubmitKey(ev) {
    if(ev.keyCode == 13) {
        checkLogin();
    }
}

function checkLogin() {
   showAlert("Hello");
}

function showAlert(str) {
    $( "#dialog" ).html(str);
    $( "#dialog" ).dialog({
        modal: true,
        title: "Alert",
        buttons: {
            "OK": function() {
                $( this ).dialog( "close" );
            }
        }
    });
}

问题是当我按下“提交”按钮时，对话框才显示;如果我在“用户名”文本字段中按 Enter ，则不会发生任何事情。

（如果我将功能checkLogin更改为

function checkLogin() {
   alert("ok");
   showAlert("Hello");
}

当我按 Enter 时，会出现对话框。）

Answer 1

您需要阻止 Enter 键的默认操作。将JS更改为：

function checkSubmitKey(ev) {
    if(ev.keyCode == 13) {
        ev.preventDefault();
        checkLogin();
    }
}

FIDDLE

jQuery UI对话框无法打开

1 个答案: