使用JQuery在按ESC键时关闭自定义框

Question

我有以下对话框的HTML代码：

<div id="modal-dialog" class="no-display">
        <div class="form">
            <div class="close">

            </div>
            <div align="center">
                <h2><u>form</u></h2>
            </div>          
            <form>
                <label for="yourname">Full name:</label><input type="text" name="yourname">
                <label for="email">E-mail:</label><input type="text" name="email">
                <label for="message">Message:</label></textarea><textarea type="text" name="message"></textarea><br/>
                <div class="clear"></div>
                <p align="center"><button>Send feedback</button></p>
            </form>
        </div>
    </div>

javascript：

$("#clickfeed").live("click", function() {
        $("#modal-dialog").removeClass("no-display");
    });

我写道：

$("#modal-dialog").live("keyup", function(e) {
        if(e.keyCode === 27 && !($(this).hasClass("no-display")))
        {
            $("#feedback-modal-dialog input").each(function() {
                $(this).attr("value","");
            });
            $("#feedback-modal-dialog textarea").each(function() {
                $(this).val("");
            });
            $("#modal-dialog").addClass("no-display"); //or .hide()
        }       
    });

只有当输入被聚焦时，ESC键才起作用，否则就不起作用。

我想在按下ESC时关闭modal-dialog框。

是我的JS代码中的错误吗？

谢谢

Answer 1

这样如何：

$("html").live("keyup", function(e) {

if(e.keyCode === 27 && !($('#modal-dialog').hasClass("no-display")))

    escape_check();

}

}

function escape_check() {

$("#modal-dialog").removeClass("no-display");

$("#feedback-modal-dialog input").each(function() {
    $('#modal-dialog').attr("value","");
});
$("#feedback-modal-dialog textarea").each(function() {
    $('#modal-dialog').val("");
});
$("#modal-dialog").addClass("no-display"); //or .hide()


}

Answer 2

如果$("#modal-dialog"没有焦点，绑定到$("#modal-dialog")将不会捕获被按下的ESC按钮。

最好将keyup绑定到整个文档，这样无论页面上的焦点在哪里，它都会引发keypress事件。

Answer 3

从jQuery 1.7开始，.live()就被弃用了。请尝试使用.on()。

它的作用是一样的。请参阅documentation。