0

Are there any suggestions out there for setting a default enter button that can work not just in IE but in Firefox, Chrome, Safari and so on. I've got a number of panels with the default button set but when I hit enter in a non ie browser it just defaults to the first link on the page.

Any suggestions?

Middletone
  • 4,190
  • 12
  • 53
  • 74

3 Answers3

1

You could write a bit of javascript that checks which button it is that is pressed - if it was the enter key, carry out your desired action.

Check for enter with something like:

function checkEnter()
{
if(event)
{
if(evnet.keyCode == 13) //ur code
}
else if(evt)
{
if(evt.keyCode == 13) //ur code
}
}
Paul
  • 5,514
  • 2
  • 29
  • 38
  • How do you suggest detecting where it was called from? It may very well be buried in some child control somewhere. – Middletone Nov 04 '09 at 17:05
  • bit awkward, but... set a global js variable. Whenever a control gains focus, set this variable to the controlID. – Paul Nov 04 '09 at 17:16
1

I've provided 2 examples here, the first one using jQuery while the second uses old school javascript.

jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script language="javascript" type="text/javascript">
    $("document").ready(function(){
        $(".searchBox").keypress(function(e){
            if (e.keyCode == 13)
                //add code here

        });
    });
</script>

<div class="searchBox">
    <input type="text" name="searchText"/>
    <input type="submit" value="search now" />
</div>

Pure javascript

I've done this before using the "onkeypress" action on a div that surrounds the form. This was tested in IE7, Firefox3, and Chrome.

here's an example:

<div id="searchBox" onkeypress="return clickButton(event,'btnSearch')">
    <input name="searchText" type="text" id="searchText"  />
    <input type="button" name="btnSearch" value="Search" id="btnSearch" onClick="SubmitAction()" /> 
</div>


<script type="text/javascript" language="javascript"> 
    function SubmitAction()
    {
        alert('button clicked');
    }

    function clickButton(e, btId){ 
          var bt = document.getElementById(btId);      
          if (typeof bt == 'object'){ 
                if(navigator.appName.indexOf("Netscape")>(-1)){ 
                      if (e.keyCode == 13){ 
                            bt.click(); 
                            return false; 
                      } 
                } 
                if (navigator.appName.indexOf("Microsoft Internet Explorer")>(-1)){ 
                      if (event.keyCode == 13){ 

                            bt.click();
                            event.cancelBubble = true; 
                            return false; 
                      } 
                } 
          } 
    }
</script>

You may have to edit this to make it fully compatible across all browsers but you should get the idea from it. Essentially any keypress while this div is focussed will call the clickButton() function. As mentioned by other answers the e.keyCode of 13 represents the Enter keypress.

NickGPS
  • 1,499
  • 14
  • 22
  • How would this be affected if the links were asp.net controls as in a webforms app? – Middletone Nov 17 '09 at 19:54
  • This code is designed to capture all enter-key presses that occur when the focus is set inside a
    on your page. You would use jQuery or native javascript to action the button/link you want as the default. In jQuery I think you'd put $('#yourASPNETGeneratedButtonId').click();. I don't use jQuery much though so I'd suggest looking it up, rather than take my word for it.
     – NickGPS Nov 19 '09 at 12:40
0

I added the panel control and it worked fine on mine.

<asp:Panel ID="panSearch" runat="server" 
       DefaultButton="btnSearch2" Width="100%" >
    <table width="100%">

    <tr>
     <td>First Name</td>
     <td ><asp:TextBox ID="txtboxFirstName2" 
           runat="server" ></asp:TextBox></td>
    </tr>

You can also go through this link

Bibek Shrestha
  • 1