堆栈内存溢出
  简体   繁体   English

当我按下回车键时如何点击某个按钮

[英]How to click on a certain button when I press the Enter key

 原文  2012-04-10 06:34:02  2   1    javascript/ html/ button

问题描述

I'm building a webApp using JSF 2.0.我正在使用 JSF 2.0 构建一个 webApp。 I recently added a jQuery dialog box that has a cancel and an OK button, but no matter what I try to make it click the OK button when the Enter key is pressed I can't do it.我最近添加了一个 jQuery 对话框，它有一个取消按钮和一个确定按钮，但是无论我尝试如何让它在按下 Enter 键时单击确定按钮我都做不到。

The javascript for the dialog box looks like this:对话框的 javascript 如下所示：

$("#goToPatientForm").dialog({
            autoOpen: false,
            height: 190,
            width: 380,
            modal: true,
            resizable: false,
            buttons: {
                "Go": function() {
                    //CLICKS THE HIDDEN SAVE BUTTON SO IT CAN LOOK PRETTY.
                    //if(getMode()=="new"){
                        $('.goTo').click(); 
                        $(this).dialog( "close" );
                },
                Cancel: function() {
                    resetFormFields();  
                    $(this).dialog( "close" );
                }
            },
            close: function() {
                resetFormFields();
                //allFields.val("").removeClass("ui-state-error");          
            }
        });

The dialog box looks like this:对话框如下所示：

<div id="goToPatientForm"  title="Go To a Form">

                <ul class="appnitro">
                    <li>
                        <h:outputLabel styleClass="description" for="pId">Patient Id: </h:outputLabel>
                        <div>
                            <h:inputText id="pId" value="#{dashboardBB.patientId}" size="30"></h:inputText>                         
                        </div>
                    </li>
                    <li style="visibility: hidden;">    
                        <h:commandButton id="goToButton" action="#{dashboardBB.actionGoTo}" styleClass="goTo" value="Go" type="submit"></h:commandButton>
                    </li>
                </ul>
                            </div>

As you can see I already gave the OK button a type="submit" and I've even added javascript to my page:如您所见，我已经为 OK 按钮提供了一个 type="submit" 并且我什至在我的页面中添加了 javascript：

$("j_idt11:pId").keyup(function(event){    
            if(event.keyCode == 13){    
                alert("sometext");
                $("j_idt11:goToButton").click();     
                } 
            });

But it doesn't work, It just reloads the page, but it doesn't hit the action for the button.但它不起作用，它只是重新加载页面，但它没有点击按钮的动作。 Any ideas why it's not working like that?任何想法为什么它不能那样工作？ Thanks again in advance!再次提前致谢！

IMAGE:图片：截屏

EDIT: here's the rendered html编辑：这是呈现的 html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/miloWeb/faces/javax.faces.resource/theme.css?ln=primefaces-aristo" /><script type="text/javascript" src="/miloWeb/faces/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=3.2"></script><script type="text/javascript" src="/miloWeb/faces/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=3.2"></script>
        <title>MILO</title>

        <link rel="stylesheet" type="text/css" href="/miloWeb/css/redmond/jquery-ui-1.8.11.custom.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="/miloWeb/css/style.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="/miloWeb/css/view.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="/miloWeb/css/ezmark.css" media="screen" />


        <!--[if IE]>
            <style type="text/css"> 
                /* place css fixes for all versions of IE in this conditional comment */
                .milo #content { zoom: 1; }
                /* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
            </style>
        <![endif]-->

        <script type="text/javascript" src="/miloWeb/js/jquery.ezmark.js"></script>
        <script type="text/javascript" src="/miloWeb/js/jquery.maskedinput.js"></script>
        <script type="text/javascript" src="/miloWeb/js/random.js"></script>
        <script type="text/javascript" src="/miloWeb/js/jquery-ui-1.8.11.custom.min.js"></script>


        <script type="text/javascript">
            $(document).ready(function(){
                $(".button").button();
            });

            function loading(){
                $( "#loadingPopUp" ).dialog( "open" );
                return false;
            }

            function unloading(){
                $( "#loadingPopUp" ).dialog( "close" );
                return false;
            }
        </script>

            <script>
            $(function() {

            $("#dialog:ui-dialog").dialog("destroy");

            $("#goToPatientForm").dialog({
                autoOpen: false,
                height: 190,
                width: 380,
                modal: true,
                resizable: false,
                buttons: {
                    "Go": function() {
                        //CLICKS THE HIDDEN SAVE BUTTON SO IT CAN LOOK PRETTY.
                        //if(getMode()=="new"){
                            $('.goTo').click(); 
                            $(this).dialog( "close" );
                    },
                    Cancel: function() {
                        resetFormFields();  
                        $(this).dialog( "close" );
                    }
                },
                close: function() {
                    resetFormFields();
                    //allFields.val("").removeClass("ui-state-error");          
                }
            });

            $("#goToPopUp")
            .click(function() {
                $( "#goToPatientForm" ).dialog( "open" );
            });


            });

            function resetFormFields(){
                document.getElementById("j_idt11:pId").value = "";
            }


            </script></head><body class="milo">
<form id="j_idt11" name="j_idt11" method="post" action="/miloWeb/faces/pages/dashboard/dashboard.xhtml" class="miloForm" enctype="multipart/form-data">
<input type="hidden" name="j_idt11" value="j_idt11" />

            <div id="container">
                <div id="header"><html xmlns="http://www.w3.org/1999/xhtml"><body>

    <div>
        <h1 class="headerTitle">MILO Chart</h1>
        <div class="headerTreadmark">Medical Information Leading Operations Chart</div>
        <div class="clear"></div>
    </div>

    <div id="headerInfo"><table>
<tbody>
<tr><td></td></tr></tbody>
</table>

    </div><div id="j_idt11:j_idt42"></div><script id="j_idt11:j_idt42_s" type="text/javascript">PrimeFaces.cw('AjaxStatus','widget_j_idt11_j_idt42',{id:'j_idt11:j_idt42'});widget_j_idt11_j_idt42.bindCallback('ajaxStart',function(){loading();});widget_j_idt11_j_idt42.bindCallback('ajaxSuccess',function(){unloading();});</script></body>
</html>
                </div>

                <div id="sidebar1"><div>
    <h3 style="margin-top: 40px;">Navigation</h3>



    <div id="navigation">
        <ul class="top-level">
            <li>
<script type="text/javascript" src="/miloWeb/faces/javax.faces.resource/jsf.js?ln=javax.faces"></script>
<a id="j_idt11:linkLogin" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:linkLogin':'j_idt11:linkLogin'},'');return false">Log Out</a></li>
            <li><a id="j_idt11:linkDashboard" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:linkDashboard':'j_idt11:linkDashboard'},'');return false">Dashboard</a></li>
            <li><a id="j_idt11:linkScheduler" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:linkScheduler':'j_idt11:linkScheduler'},'');return false">Scheduler</a></li>
            <li>
                <ul class="sub-level">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>
                <ul class="sub-level">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>
                <ul class="sub-level">
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li></li>

    </ul>
<h3 style="margin-top: 40px;">Opened Encounter</h3>
<div id="navigation2">
    <ul class="top-level">
            <li></li>
            <li></li>
            <li>
                <ul class="sub-level">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li></li>
            <li></li>
            <li>
                <ul class="sub-level">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li></li>
    </ul>
</div>
</div>




</div>
                        <!-- end #sidebar1 -->              
                </div>
                <br />
                <br />
                <div id="content">

            <div id="goToPatientForm" title="Go To a Chart">

                    <ul class="appnitro">
                        <li><label for="j_idt11:pId" class="description">
Patient Id: </label>
                            <div><input id="j_idt11:pId" type="text" name="j_idt11:pId" size="30" />                            
                            </div>
                        </li>
                        <li style="visibility: hidden;"><input id="j_idt11:goToButton" type="submit" name="j_idt11:goToButton" value="Go" class="goTo" />
                        </li>
                    </ul>
                    <p class="validateTips">Type in the Patient Id of the chart you wish to open.</p>
            </div>


            <h2>Dashboard</h2>
            <div>
            <center>
                <table cellspacing="0" cellpadding="3" width="520" style="position: relative; top: 100px;">
                    <tr>
                        <td align="center"><a id="j_idt11:linkLoginDash" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:linkLoginDash':'j_idt11:linkLoginDash'},'');return false"><img src="/miloWeb/images/schedulerIcon1.1.png" alt="Scheduler" /></a></td>
                        <td align="center"><a id="j_idt11:link2" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:link2':'j_idt11:link2'},'');return false"><img src="/miloWeb/images/newIcon1.1.png" alt="New Patient" /></a></td>
                        <td align="center"><a id="j_idt11:link3" href="#" onclick="jsf.util.chain(this,event,'return false;','mojarra.jsfcljs(document.getElementById(\'j_idt11\'),{\'j_idt11:link3\':\'j_idt11:link3\'},\'\')');return false"><img src="/miloWeb/images/goToIcon1.1.png" alt="Go To Patient" id="goToPopUp" /></a></td>
                        <td align="center"><a id="j_idt11:link4" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:link4':'j_idt11:link4'},'');return false"><img src="/miloWeb/images/searchIcon1.1.png" alt="Search screen" /></a></td>
                        <td align="center"><a id="j_idt11:link5" href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt11'),{'j_idt11:link5':'j_idt11:link5'},'');return false"><img src="/miloWeb/images/settingsIcon1.2.png" alt="Settings" /></a></td>

                    </tr>
                    <tr>
                        <td align="center">Scheduler</td>
                        <td align="center">New</td>
                        <td align="center">Go To</td>
                        <td align="center">Search</td>
                        <td align="center">Settings</td>
                    </tr>
                </table>
            </center>
            </div>
                </div>

                <br class="clear" />

                <div id="footer"><div id="template_footer_id" style="text-align: center;">&copy; 2012 Bravo Technologies.
</div>
                </div>
            </div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="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" autocomplete="off" />
</form></body>

</html>

1 个解决方案

解决方案1
 2  2012-04-10 06:47:23

Please Try this code请试试这个代码

$('body').keyup(function(e) {
   if ($('#goToPatientForm').is(':visible') && e.which == 13) {
      //stuff
   }
});

Hope this is helpful for you.希望这对你有帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何单击Enter键上的按钮 - How to click a button on Enter key press 当我按下回车键时如何触发网站的按钮？ - how to trigger the button of the website when i press the enter key? 当用户在文本框中按Enter键时，执行按钮单击事件 - Perform Button click event when user press Enter key in Textbox 按输入控件外输入键时如何触发按钮单击 - How to trigger button click when press enter key outside of input controls 如何使用 Enter 键按下按钮 - How to press a button with Enter Key 如何通过单击按钮触发功能，该功能已设置为在 AngularJS 中使用“Enter”键触发？ - How I can trigger a function with a button click which is already set to be triggered with "Enter" Key press in AngularJS? 按住“ enter”键时如何防止触发按钮事件？ - How to prevent triggering button event when press 'enter' key and hold? 当我在表单中按下回车键时如何触发另一个按钮 - How to trigger another button when I press enter key inside my form 按下Enter键并单击？ - press enter key with a click? 按回车键时如何调用 function？ - How can I call a function when I press the enter key?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM