如何从 div 标签捕获页面中的任何关键事件？答案

【问题标题】：how to capture any key events in the page from div tag?如何从 div 标签捕获页面中的任何关键事件？
【发布时间】：2012-11-11 14:27:04
【问题描述】：

谁能告诉我如何在 div 标签中捕获关键事件？

我写了这段代码，但它不起作用？

<div id="SDiv" style="background-color: White; " onkeypress="kypress()">
     <asp:Label ID="LblSaveAndMoveNext" runat="server" Visible="False" Text="Save"></asp:Label>
</div>

<script type="text/javascript"> 
    function kypress() { EnableButtons(true);}
</script>

【问题讨论】：

div 标签不是可以设置焦点的标签。
您必须先将焦点设置到 div。查看此链接了解更多信息 [1]：stackoverflow.com/questions/3149362/…。
那么如何实现。在我的页面中我没有表单标签。我的要求是当我在页面中按任意键时我应该调用 kypress() 函数。

标签： javascript

【解决方案1】：

答案请参考帖子“jQuery Event Keypress: Which key was pressed?”...

你需要设置div的tabindex属性如下：

<div id="example" tabindex="1" />

【讨论】：

【解决方案2】：

只有可以接收焦点的元素，例如输入和其他与表单相关的元素，才会触发键事件。要强制 <div> 元素能够接收焦点，您可以使其成为 contenteditable，这可能不是您想要的，或者添加 tabindex 属性。使用值 0 会将元素放置在 Tab 键顺序中的默认位置。

<div id="SDiv" tabindex="0" style="background-color: White;"
     onkeypress="kypress()">
    ...
</div>

【讨论】：

【解决方案3】：

您可以通过使用 contenteditable div 来克服它，就像这样。确保您返回 false 以防止 html 中的更改。

    <div  id="SDiv" contenteditable="true" 
    style="background-color: White; " tab-index="1" onkeydown="return keydown();">
       <asp:Label ID="LblSaveAndMoveNext" runat="server" Visible="False" Text="Save"></asp:Label>           
    </div>


    <script type="text/javascript">
        function keydown(){
            var keyCode = event.which;
            if(keyCode==13)
                document.write('You pressed Enter');
            //do your logic here
            return false;
        }
    </script>

【讨论】：

【解决方案4】：

您必须拥有焦点才能触发按键事件。

或者您可以在文档对象上应用按键。

使用 jQuery：

$(document).keypress(function(){
     /*do something*/
});

【讨论】：