按Enter键时jQuery对话框不起作用

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form action="" id="formID" name="formID" >
    <input type="text" id="filename" class="validate[required]"/>
    <script type="text/javascript">
        $('#filename').keypress(function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                alert("Enter");
                var val = $("#filename").val();
                if (val != '') {                         
                    var rev_str = val.split('').reverse().join('');             
                    var char0 = rev_str.charAt(0);
                    var char1 = rev_str.charAt(1);
                    var char2 = rev_str.charAt(2);
                    var char3 = rev_str.charAt(3);
                    var sumchar = char0 + char1 + char2 + char3;
                    alert(sumchar);
                    if (sumchar != "txt.") {
                        if (sumchar != "TXT.") {
                            alert(sumchar + "   "  + "1");
                            $("#dialogmsg").dialog({
                                modal : true,
                                draggable : false,
                                resizable : false,
                                show : 'blind',
                                hide : 'blind',
                                width : 200,
                                dialogClass : 'osx',
                                buttons : {
                                    " Back " : function() {
                                        $(this).dialog("close");
                                        $("#filename").focus();
                                        $("#filename").val("");
                                    }
                                }
                            });
                        } else {
                            alert("salam1");
                            $("#formID").submit();
                        }
                    } else {
                        alert("salam2");
                        $("#formID").submit();
                    }
                }
            }
            event.stopPropagation();
        });
    </script>
    
    <button type="button" id="click"> OK </button>
</form>
<div id="dialogmsg" class="dialogmsg" title=" Warning " style="display: none;"
    align="center">
    <span style="color: red;"> Is Not Valid </span>
</div>

Answer 1

您需要包含jQuery UI库和CSS主题才能使对话框生效。

请注意，.dialog()是jQuery UI的一部分。

工作代码段

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<form action="" id="formID" name="formID" >
    <input type="text" id="filename" class="validate[required]"/>
    <script type="text/javascript">
        $('#filename').keypress(function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                alert("Enter");
                var val = $("#filename").val();
                if (val != '') {                         
                    var rev_str = val.split('').reverse().join('');             
                    var char0 = rev_str.charAt(0);
                    var char1 = rev_str.charAt(1);
                    var char2 = rev_str.charAt(2);
                    var char3 = rev_str.charAt(3);
                    var sumchar = char0 + char1 + char2 + char3;
                    alert(sumchar);
                    if (sumchar != "txt.") {
                        if (sumchar != "TXT.") {
                            alert(sumchar + "   "  + "1");
                            $("#dialogmsg").dialog({
                                modal : true,
                                draggable : false,
                                resizable : false,
                                show : 'blind',
                                hide : 'blind',
                                width : 200,
                                dialogClass : 'osx',
                                buttons : {
                                    " Back " : function() {
                                        $(this).dialog("close");
                                        $("#filename").focus();
                                        $("#filename").val("");
                                    }
                                }
                            });
                        } else {
                            alert("salam1");
                            $("#formID").submit();
                        }
                    } else {
                        alert("salam2");
                        $("#formID").submit();
                    }
                }
            }
            event.stopPropagation();
        });
    </script>
    
    <button type="button" id="click"> OK </button>
</form>
<div id="dialogmsg" class="dialogmsg" title=" Warning " style="display: none;"
    align="center">
    <span style="color: red;"> Is Not Valid </span>
</div>

读取：.dialog() | jQuery UI