2uzhan.com
Advertisement
Now Place:2uzhan.com » HTML Capturing Enter key press

HTML Capturing Enter key press

Scripting - Client Side @ November 16, 2011   Views:0

In short: I have a VBScript embedded in the Html file. I want that trigged when the user presses Enter in the field. There is no Server side part to this. All the code is local to the page.

Right now when the user types in a value, and presses enter, the field blanks out and thats it.
I'm having an unbelievably hard time trying to do this, and yet there is a ton of examples online on this.

This isn't the full script. It's just a shell of how it's laid out.

Code:

<HTML>
<HEAD>
<TITLE>Query Active Directory</TITLE>
</HEAD>

   <SCRIPT LANGUAGE="VBScript">
    Sub TestMe
        MsgBox("Searching Active Directory")
    End Sub
   </SCRIPT>

<BODY>
<FORM NAME="Form1">
        <input type="text" name="SearchAD">
        <input type="submit" Value="Search">
</FORM>
</BODY>

</HTML>

What do I have to insert that'll allow me to trigger a VBScript when pressing Enter on the Text box field.

--------------Solutions-------------

Please remember to search before posting. This question is answered all over CodeGuru and the internet.

http://www.google.com/search?q=html+input+enter+key

I searched for 3 days.
Nothing I tried worked so I'm posting my own example.
Most things I seen are 1 or 2 liners which I'm not getting the full picture.

Actually I even posted that in my original post.

Example #1
No syntax errors, but Enter or Clicking the button doesn't trigger.

Code:

<HTML>
<HEAD>
<TITLE>Test Button Events</TITLE>
</HEAD>

    <SCRIPT LANGUAGE="VBScript">
    Sub TestMe
        MsgBox("A simple example of VBScript in action.")
    End Sub
    </SCRIPT>

<BODY>
    <FORM NAME="Form1">
        <input type="text" name="SearchAD" onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()">
        <input type="submit" id="btnSearch" Value="Search" onclick="TestMe();">
    </FORM>
</BODY>
</HTML>

Example #2:
Again, no syntax errors, but doesn't trigger anything on Enter or Click.

Code:

<HTML>
<HEAD>
<TITLE>Test Button Events</TITLE>
</HEAD>

    <SCRIPT LANGUAGE="VBScript">
    Sub TestMe
        MsgBox("A simple example of VBScript in action.")
    End Sub
    </SCRIPT>

<BODY>
    <FORM NAME="Form1">
        <input type="text" name="SearchAD" onkeypress="searchKeyPress(event);">
        <input type="submit" id="btnSearch" Value="Search" onclick="TestMe();">
    </FORM>
</BODY>
</HTML>

    <script>
    function searchKeyPress(e)
    {
    // look for window.event in case event isn't passed in
    if (window.event) { e = window.event; }
    if (e.keyCode == 13)
    {
       document.getElementById('btnSearch').click();
    }
    }
    </script>

Example #3
No luck with this either.
Many of the recommendations are just 1 or 2 lines. There is something I'm missing, or not understanding, but I'm not getting a full working example anywhere.

Code:

<HTML>
<HEAD>
<TITLE>Test Button Events</TITLE>
</HEAD>

    <SCRIPT LANGUAGE="VBScript">
    Sub TestMe
        MsgBox("A simple example of VBScript in action.")
    End Sub
    </SCRIPT>

<BODY>
    <FORM NAME="Form1">
        <input type="text" name="SearchAD" onkeydown="javascript:if (event.which || 

event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById

('btnSearch').click();}};">
        <input type="submit" id="btnSearch" Value="Search" onclick="TestMe();">
    </FORM>
</BODY>
</HTML>

Example #4.
No syntax error.. I'm not very experienced with Java Script, but I don't think I'm calling the VBScript wrong.

Code:

<HTML>
<HEAD>
<TITLE>Test Button Events</TITLE>
</HEAD>

    <SCRIPT LANGUAGE="VBScript">
    Sub TestMe
        MsgBox("A simple example of VBScript in action.")
    End Sub
    </SCRIPT>

<BODY>
    <FORM NAME="Form1">
        <input type="text" name="SearchAD" onkeypress="handleKeyPress(event,this.form)">
        <input type="submit" id="btnSearch" Value="Search" onclick="TestMe();">
    </FORM>

 <script type="text/javascript">
 function handleKeyPress(e,form){
 var key=e.keyCode || e.which;
 if (key==13){
 TestMe();
 }
 }
 </script>

</BODY>
</HTML>

Example #5 - This partially works.
Is there a way to lock it down to that 1 field?
From the example below:
document.onkeydown = function() {
Doesn't work if written as
document.Form1.SearchAD.onkeydown = function() {

As a backup plan, I'm trying to figure how to capture what field has the focus when Enter is pressed if I can't isolate it to 1 field.

Code:

<HTML>
<HEAD>
<TITLE>Test Button Events</TITLE>
</HEAD>

    <script language="Javascript">
    document.onkeydown = function() {
        if (event.keyCode == 13) {
            TestMe();
        }
    }
    </script>

    <SCRIPT LANGUAGE="VBScript">
    Sub TestMe
        Dim VAR_LANID
        VAR_LANID = trim(Document.Form1.SearchAD.value)
        if Len(VAR_LANID) > 0 then MsgBox(VAR_LANID)
    End Sub
    </SCRIPT>

<BODY>
    <form name="Form1">
        <input type="text" name="SearchAD">
        <input type="submit" id="btnSearch" Value="Search" onclick="TestMe();">
    </FORM>

</BODY>
</HTML>

This works, although you'll need IE if you want a VBScript version:

Code:

<html>
<head>
<title>Test</title>
<script language=VBScript>
Sub IsEnter
    If Window.Event.KeyCode = 13 Then
        MsgBox Test.Value
    End If
End Sub

</script>
</head>

<body>
<input type="text" value="" id="Test" onkeypress="IsEnter"/>
</body>
</html>

Please remember to use code tags guys.

As for your problem Raygar...a number of issues.

1. Your <input> is inside of a <form> tag. So, when the user hits the return key, the form is going to submit and nullify the VBScript you've written.

2. You need to be using onkeypress and not onkeydown.

3. Unless you plan to make this IE only, why are you using VBScript? You need to use JavaScript.

Code:

<script type="text/javascript">
function checkKey(e) {
  if (e.keyCode == 13) {
    alert('Return key pressed');
  }
  return false;
}
</script>

<input type="text" name="SearchAD" onkeypress="checkKey(event);">
Tags:
© 2018 2uzhan.com Contact