Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 318
  • Last Modified:

Web App - Enter key triggering a button - I don't want this

Hi,

     I have a webform with some buttons at the bottom.  Add/Edit/Cancel/Delete.  I also have, by javascript, the focus initially set to a textbox.  This is so an item's barcode can be scanned with a barcode scanner.  When this happens, (and since I've found the same thing happens when I just press enter), the Add button is triggered.  So both hitting enter at any time in the form or using the scanner (Which apparently sends a carriage return after the barcode), I get all the text controls opened ready for a new item to be added.  How do I stop this?

JP
0
gleznov
Asked:
gleznov
  • 18
  • 12
1 Solution
 
iboutchkineCommented:
You can disable enter key in the textbox

<asp:TextBox id=abd  onKeyDown="return handler(event)"  runat=server/>
<asp:Button id=bt1 onEnter="return false;" runat=server Text="Submit" />
</form>
</body>
</html>
<script language="JavaScript">
function handler(e) {
    var key = (navigator.appName == "Netscape") ? e.which : e.keyCode;
    if (key == 13) return false;
}
</script>
0
 
gleznovAuthor Commented:
I'm confused, is the textbox I'm focusing in causing the enter key to trigger the Add button?  What exactly am I changing?  Is that modifications to code for the textbox, or some code to tag to the end of all the rest?

JP
0
 
iboutchkineCommented:
Any enter event will trigger the Submit button to post to the server. The code that I gave will eliminate the Enter event . This means that default submit button will not fire.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
gleznovAuthor Commented:
So do I take the "onkeyDown="return handler(event)" runat=server"  and put it somewhere or do I put that code as is at the end of the <form></form> area?

same for button - do I copy that code, or put it in as a fake button, or copy that stuff into a real button?

JP
0
 
gleznovAuthor Commented:
<asp:textbox id="txtStock" style="Z-INDEX: 125; LEFT: 160px; POSITION: absolute; TOP: 520px"
                        onKeyDown="return handler(event)" runat="server" Width="240px"></asp:textbox>

<asp:button id="cmdScanStock" style="Z-INDEX: 143; LEFT: 552px; POSITION: absolute; TOP: 272px"
                        onEnter="return false;" runat="server" Height="20px" Width="40px" Text="Go!"></asp:button>

It doesn't like the onKeyDown and onEnter when I add them to the textbox/button I have

JP
0
 
gleznovAuthor Commented:
Actually the program will run with that change and the script at the bottom, but it still doesn't change anything.  I'm bad with the asp/html java side of this stuff so I'm sure I'm making a stupid error.

JP
0
 
iboutchkineCommented:
>>So do I take the "onkeyDown="return handler(event)" runat=server

Open your page in HTML view
Find <asp:textbox ....
Add onkeyDown=" whithin asp:textbox tags like below ( it is withing form tags)

<asp:textbox id="txtStock" style="Z-INDEX: 125; LEFT: 160px; POSITION: absolute; TOP: 520px"
                    onKeyDown="return handler(event)" runat="server" Width="240px"></asp:textbox>


within Head tags add the java script

<script language="JavaScript">
function handler(e) {
    var key = (navigator.appName == "Netscape") ? e.which : e.keyCode;
    if (key == 13) return false;
}
</script>

Scripts in the body section:
Scripts to be executed when the page loads go in the body section.
When you place a script in the body section it generates the content of the page.

Scripts in the head section:
Scripts to be executed when they are called, or when an event is triggered, go in the head section.
When you place a script in the head section, you will ensure that the script is loaded before anyone uses it.

0
 
gleznovAuthor Commented:
But why, if that code intercepts all enter key presses, do you have to put that code into only one textbox?  Or would I have to put that on every textbox to be sure?

JP
0
 
gleznovAuthor Commented:
I have this already now:

<asp:textbox id="txtStock" style="Z-INDEX: 125; LEFT: 160px; POSITION: absolute; TOP: 520px"
                        onKeyDown="return handler(event)" runat="server" Width="240px"></asp:textbox>


and

      <HEAD>
            <title>Inventory</title>
            <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
            <script language="JavaScript">
      function handler(e) {
            var key = (navigator.appName == "Netscape") ? e.which : e.keyCode;
          if (key == 13) return false;
      }
            </script>
      </HEAD>


But it still doesn't seem to work.

JP
0
 
gleznovAuthor Commented:
Oh, I also have this:

<asp:button id="cmdScanStock" style="Z-INDEX: 143; LEFT: 552px; POSITION: absolute; TOP: 272px"
                        onEnter="return false;" runat="server" Height="20px" Width="40px" Text="Go!"></asp:button>

JP
0
 
iboutchkineCommented:
I have IE and it works fine
0
 
gleznovAuthor Commented:
I use IE also.  I don't know if this will help or just be unnecessarily cluttery, but here's the full HTML side code:

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Inventory.aspx.vb" Inherits="OEL2.Inventory"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
      <HEAD>
            <title>Inventory</title>
            <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
            <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
            <meta content="JavaScript" name="vs_defaultClientScript">
            <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
            <script language="JavaScript">
      function handler(e) {
            var key = (navigator.appName == "Netscape") ? e.which : e.keyCode;
          if (key == 13) return false;
      }
            </script>
      </HEAD>
      <body MS_POSITIONING="GridLayout">
            <form id="Form1" method="post" runat="server">
                  <asp:label id="Label1" style="Z-INDEX: 104; LEFT: 112px; POSITION: absolute; TOP: 40px" runat="server"
                        Font-Size="X-Large" Font-Names="Felix Titling" Font-Bold="True" Height="32px" width="64px">OEL</asp:label><asp:imagebutton id="cmdAdd" style="Z-INDEX: 131; LEFT: 16px; POSITION: absolute; TOP: 624px" runat="server"
                        Height="25px" Width="100px" BorderStyle="Outset" BorderColor="Transparent" ImageUrl="oel2_btn_add.bmp"></asp:imagebutton><asp:imagebutton id="cmdEdit" style="Z-INDEX: 126; LEFT: 128px; POSITION: absolute; TOP: 624px" runat="server"
                        Height="25px" Width="100px" BorderStyle="Outset" BorderColor="Transparent" ImageUrl="oel2_btn_edit.bmp"></asp:imagebutton><asp:imagebutton id="cmdSave" style="Z-INDEX: 128; LEFT: 240px; POSITION: absolute; TOP: 624px" runat="server"
                        Height="25px" Width="100px" BorderStyle="Outset" ImageUrl="oel2_btn_save.bmp"></asp:imagebutton><asp:imagebutton id="cmdCancel" style="Z-INDEX: 129; LEFT: 352px; POSITION: absolute; TOP: 624px"
                        runat="server" Height="25px" Width="100px" BorderStyle="Outset" ImageUrl="oel2_btn_cancel.bmp"></asp:imagebutton><asp:imagebutton id="cmdMainMenu" style="Z-INDEX: 130; LEFT: 184px; POSITION: absolute; TOP: 672px"
                        runat="server" Height="25px" Width="100px" BorderStyle="Outset" ImageUrl="oel2_btn_mainmenu.bmp"></asp:imagebutton><asp:label id="Label2" style="Z-INDEX: 102; LEFT: 176px; POSITION: absolute; TOP: 32px" runat="server"
                        Font-Size="Large" Font-Names="Footlight MT Light" Font-Bold="True" Height="16px" Width="16px">2</asp:label><asp:label id="Label3" style="Z-INDEX: 103; LEFT: 216px; POSITION: absolute; TOP: 96px" runat="server"
                        Font-Size="Large" Font-Names="Arial" Font-Bold="True" Height="24px" Width="163px">Item Issue</asp:label><asp:image id="Image1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 64px" runat="server"
                        Height="100px" Width="300px" ImageUrl="uscore.bmp"></asp:image><asp:label id="Label4" style="Z-INDEX: 105; LEFT: 48px; POSITION: absolute; TOP: 200px" runat="server"
                        Height="16px" Width="80px">Line Item</asp:label><asp:label id="Label5" style="Z-INDEX: 106; LEFT: 48px; POSITION: absolute; TOP: 232px" runat="server"
                        Height="16px" Width="88px">Nomenclature</asp:label><asp:label id="Label6" style="Z-INDEX: 107; LEFT: 48px; POSITION: absolute; TOP: 296px" runat="server"
                        Height="24px" Width="88px">Serial Number</asp:label><asp:label id="Label7" style="Z-INDEX: 108; LEFT: 48px; POSITION: absolute; TOP: 264px" runat="server"
                        Height="24px" Width="88px">Manufacturer</asp:label><asp:label id="Label8" style="Z-INDEX: 109; LEFT: 48px; POSITION: absolute; TOP: 328px" runat="server"
                        Height="16px" Width="64px">Unit Issue</asp:label><asp:label id="Label9" style="Z-INDEX: 110; LEFT: 48px; POSITION: absolute; TOP: 360px" runat="server"
                        Height="24px" Width="64px">Unit Price</asp:label><asp:label id="Label10" style="Z-INDEX: 111; LEFT: 48px; POSITION: absolute; TOP: 392px" runat="server"
                        Height="24px" Width="64px">Custodian</asp:label><asp:label id="Label11" style="Z-INDEX: 112; LEFT: 48px; POSITION: absolute; TOP: 424px" runat="server"
                        Height="16px" Width="72px">Shop Code</asp:label><asp:label id="Label12" style="Z-INDEX: 113; LEFT: 48px; POSITION: absolute; TOP: 456px" runat="server"
                        Height="24px" Width="104px">Transaction Date</asp:label><asp:label id="Label13" style="Z-INDEX: 114; LEFT: 48px; POSITION: absolute; TOP: 488px" runat="server"
                        Height="24px" Width="40px">Status</asp:label><asp:label id="Label14" style="Z-INDEX: 115; LEFT: 48px; POSITION: absolute; TOP: 520px" runat="server"
                        Height="24px" Width="96px">Stock Number</asp:label><asp:label id="Label19" style="Z-INDEX: 116; LEFT: 48px; POSITION: absolute; TOP: 552px" runat="server"
                        Height="24px" Width="96px">Component Of</asp:label><asp:dropdownlist id="cmbCust" style="Z-INDEX: 117; LEFT: 160px; POSITION: absolute; TOP: 392px" runat="server"
                        Width="241px"></asp:dropdownlist><asp:textbox id="txtDate" style="Z-INDEX: 118; LEFT: 160px; POSITION: absolute; TOP: 456px" runat="server"
                        Width="240px" Enabled="False"></asp:textbox><asp:textbox id="txtID" style="Z-INDEX: 119; LEFT: 160px; POSITION: absolute; TOP: 200px" runat="server"
                        Width="240px" Enabled="False"></asp:textbox><asp:textbox id="txtSerial" style="Z-INDEX: 120; LEFT: 160px; POSITION: absolute; TOP: 296px"
                        runat="server" Width="241px"></asp:textbox><asp:textbox id="txtUIss" style="Z-INDEX: 121; LEFT: 160px; POSITION: absolute; TOP: 328px" runat="server"
                        Width="240px"></asp:textbox><asp:textbox id="txtUPri" style="Z-INDEX: 122; LEFT: 160px; POSITION: absolute; TOP: 360px" runat="server"
                        Width="240px"></asp:textbox><asp:textbox id="txtShop" style="Z-INDEX: 123; LEFT: 160px; POSITION: absolute; TOP: 424px" runat="server"
                        Width="240px"></asp:textbox><asp:textbox id="txtStatus" style="Z-INDEX: 124; LEFT: 160px; POSITION: absolute; TOP: 488px"
                        runat="server" Width="240px"></asp:textbox><asp:textbox id="txtStock" style="Z-INDEX: 125; LEFT: 160px; POSITION: absolute; TOP: 520px"
                        onKeyDown="return handler(event)" runat="server" Width="240px"></asp:textbox><asp:textbox id="txtCompOf" style="Z-INDEX: 127; LEFT: 160px; POSITION: absolute; TOP: 552px"
                        runat="server" Width="240px"></asp:textbox><asp:label id="Label16" style="Z-INDEX: 132; LEFT: 504px; POSITION: absolute; TOP: 208px" runat="server"
                        Font-Bold="True" Height="16px" Width="136px">Find Stock Number</asp:label><asp:label id="Label17" style="Z-INDEX: 133; LEFT: 504px; POSITION: absolute; TOP: 336px" runat="server"
                        Font-Bold="True" Height="16px" Width="136px">Find Serial Number</asp:label><asp:textbox id="txtScanStock" style="Z-INDEX: 134; LEFT: 488px; POSITION: absolute; TOP: 240px"
                        runat="server" Width="176px"></asp:textbox><asp:textbox id="txtScanSerial" style="Z-INDEX: 135; LEFT: 488px; POSITION: absolute; TOP: 368px"
                        runat="server" Width="184px"></asp:textbox><asp:button id="cmdPrint" style="Z-INDEX: 136; LEFT: 536px; POSITION: absolute; TOP: 544px"
                        runat="server" Width="80px" Text="Print"></asp:button><asp:label id="Label18" style="Z-INDEX: 137; LEFT: 544px; POSITION: absolute; TOP: 464px" runat="server"
                        Font-Bold="True" Height="16px" Width="64px">Bar Code</asp:label><asp:label id="lblBarCode" style="Z-INDEX: 138; LEFT: 512px; POSITION: absolute; TOP: 496px"
                        runat="server" Font-Size="XX-Large" Font-Names="Free 3 of 9" Height="48px" Width="209px" CssClass="stylesheet1.css"></asp:label><asp:button id="cmdScanSerial" style="Z-INDEX: 139; LEFT: 552px; POSITION: absolute; TOP: 400px"
                        runat="server" Height="20px" Width="40px" Text="Go!"></asp:button><asp:label id="Label15" style="Z-INDEX: 140; LEFT: 192px; POSITION: absolute; TOP: 592px" runat="server"
                        Height="16px" Width="104px" ForeColor="Red"></asp:label><asp:dropdownlist id="cmbNom" style="Z-INDEX: 141; LEFT: 160px; POSITION: absolute; TOP: 232px" runat="server"
                        Height="24px" Width="240px"></asp:dropdownlist><asp:textbox id="txtManf" style="Z-INDEX: 142; LEFT: 160px; POSITION: absolute; TOP: 264px" runat="server"
                        Width="241px"></asp:textbox><asp:button id="cmdScanStock" style="Z-INDEX: 143; LEFT: 552px; POSITION: absolute; TOP: 272px"
                        onEnter="return false;" runat="server" Height="20px" Width="40px" Text="Go!"></asp:button><asp:label id="Label20" style="Z-INDEX: 144; LEFT: 456px; POSITION: absolute; TOP: 144px" runat="server"
                        Height="32px" Width="256px">Label</asp:label></form>
            </FORM></FORM>
      </body>
</HTML>


JP
0
 
iboutchkineCommented:
Here, I wrote a test and it works for me. try it

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="TestPage.aspx.vb" Inherits="Test2003.TestPage"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
      <HEAD>
            <title>TestPage</title>
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
            <meta name="vs_defaultClientScript" content="JavaScript">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
      </HEAD>
      <BODY>
            <form id="Form1" method="post" runat="server">
                  <asp:TextBox id="abd" onKeyDown="return handler(event)" runat="server" />
                  <asp:Button id="bt1" onEnter="return false;" runat="server" Text="Submit" />
            </form>
            <script language="JavaScript">
                function handler(e) {
    var key = (navigator.appName == "Netscape") ? e.which : e.keyCode;
   if (key == 13) return false;
        }
            </script>
      </BODY>
</HTML>



Code behind the page
Public Class TestPage
    Inherits System.Web.UI.Page

#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

    End Sub
    Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox
    Protected WithEvents bt1 As System.Web.UI.WebControls.Button
    Protected WithEvents abd As System.Web.UI.WebControls.TextBox

    'NOTE: The following placeholder declaration is required by the Web Form Designer.
    'Do not delete or move it.
    Private designerPlaceholderDeclaration As System.Object

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here
        If Page.IsPostBack Then
            abd.Text = ""
        End If
    End Sub

End Class


When I enter text to the textbopx abd and hit Enter key - nothing is going on. If I click button Submit - postback happenns anbd the text is blank
0
 
gleznovAuthor Commented:
I still get squigglies under "OnKeyDown" and "OnEnter"

JP
0
 
gleznovAuthor Commented:
wait, why does the code say Netscape?

      function handler(e) {
            var key = (navigator.appName == "Netscape") ? e.which : e.keyCode;
          if (key == 13) return false;
      }

JP
0
 
iboutchkineCommented:
don't  worry about squigglies. It's a bug. It stii works

>>wait, why does the code say Netscape?
I believe it will make it work on Netscape too. I never played with netscape
0
 
gleznovAuthor Commented:
When I hit enter after the form loads, it still resubmits the form and uses the Add button.

JP
0
 
iboutchkineCommented:
Did you add
onEnter="return false;"

to the Add button
0
 
gleznovAuthor Commented:
I've added it to every button on the form, but it still triggers Add button...

JP
0
 
iboutchkineCommented:
try to create a new application with the html and code that I gave you. Just copy and paste. See if it works for you
0
 
gleznovAuthor Commented:
Parser Error
Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Could not load type 'Test2003.TestPage'.

Source Error:


Line 1:  <%@ Page Language="vb" AutoEventWireup="false" Codebehind="TestPage.aspx.vb" Inherits="Test2003.TestPage"%>
Line 2:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Line 3:  <HTML>
 
0
 
iboutchkineCommented:
You are getting the error because of the different name of the application. My app name is Test2003 and the page name TestPage.
Change to your name of the app and page (or cretae test application with the same name)
0
 
gleznovAuthor Commented:
It works.

JP
0
 
gleznovAuthor Commented:
But why does that work and the other one doesn't?

JP
0
 
iboutchkineCommented:
I don't  know. Probably it is from the miracle department.
But at least we are getting closer. Check all the form and control settings like autopostback etc.
0
 
gleznovAuthor Commented:
I found a solution that seems to work.  This is odd.

I moved my Add button out of place and made it invisible, changed the name to cmdAdd3
I  made a new button with the Add graphic and called it cmdAdd
I put code in the cmdAdd3 sub to make a label say something.

Now when I hit enter, the form isn't disrupted - although even after I made cmdAdd3 causesValidation = false, it still posts back.  As long as the form isn't disrupted...  Thanks for all the help.

JP
0
 
iboutchkineCommented:
you are welcome
0
 
gleznovAuthor Commented:
OK my brilliant plan worked a couple times, and now it no longer works.  !@#$!

JP
0
 
gleznovAuthor Commented:
This is what works:

<script type="text/javascript">
document.onkeypress = ignoreEnter;
function ignoreEnter(e)
{
  var theKey = window.event? event.keyCode: e.which;
  if (theKey == 13)
  {
    if (window.event)
      event.cancelBubble = true;
    else
      e.stopPropagation();
    // comment out the line after this to get rid of the alert
    alert("captured enter, but ignoring it");
    return false;
  }
}
</script>


JP
0
 
iboutchkineCommented:
Also try this which will disable Enter key

      <script language="JavaScript">
if (document.layers || document.all) document.onkeypress = f1;
function f1(e)
{
     if ((document.layers && e.which == 13) || (document.all && window.event.keyCode == 13))
     {
          return false;
      }
}
</script>
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 18
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now