I have the following code:

<div dojoType="dijit.layout.ContentPane" id="filterForm" style="padding: 3px">
    <form dojoType="dijit.form.Form">
        <input dojoType="dijit.form.TextBox" style="width: 120px" />
        <button dojoType="dijit.form.Button" type="submit">
            Filter
        </button>
        <script type="dojo/connect" event="onSubmit" args="evt">
            filterGrid();
            dojo.stopEvent(evt);
        </script>
    </form>
</div>

It works as expected if I click the Filter button, however I would like the same behavior when user presses Enter, while textbox is focused. This doesn't happen, though. In fact, nothing happens when I press Enter. How can I have the onSubmit handler execute upon pressing Enter? Thanks.

I have the following code:

<div dojoType="dijit.layout.ContentPane" id="filterForm" style="padding: 3px">
    <form dojoType="dijit.form.Form">
        <input dojoType="dijit.form.TextBox" style="width: 120px" />
        <button dojoType="dijit.form.Button" type="submit">
            Filter
        </button>
        <script type="dojo/connect" event="onSubmit" args="evt">
            filterGrid();
            dojo.stopEvent(evt);
        </script>
    </form>
</div>

It works as expected if I click the Filter button, however I would like the same behavior when user presses Enter, while textbox is focused. This doesn't happen, though. In fact, nothing happens when I press Enter. How can I have the onSubmit handler execute upon pressing Enter? Thanks.

• javascript
• dojo

Share Improve this question Follow asked Oct 11, 2010 at 18:09 AriodAriod 5,8512222 gold badges7777 silver badges104104 bronze badges 2

• Sure seems to work for me on FF 3.6, Chrome 7, IE 8... jsfiddle/x3MMA (added a console.log to test). Are we missing some details of the problem? – Ken Franqueiro Commented Oct 12, 2010 at 2:41
• Thanks for your support again, Ken. I've written below about the cause of the problem. – Ariod Commented Oct 12, 2010 at 14:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Dario this should work. Something else in your environment is screwing it up. You might have another bit of script that is intercepting keystrokes. This could be in your scripts on the web page or even in your browser environment such as a grease monkey script or other extention.

You should setup a minimal test case where the web page includes only some bare minimal html including that form and load dojo from the aol or google CDN's and try the enter. If it doesn't work give us a full copy of (or the URL to) your test and we'll try to see what's going wrong, but I suspect that will work. Then you need to work backwards between the minimal test case and your full site environment until you find the conflicting bit of script.

This is solution I have written and worked for me. Submit the enter key on "dijit/form/ValidationTextBox" using Mocha tests

keyEventDispatch : function (element, code, pletionFn) {

        var keyboardEvent = document.createEvent("KeyboardEvent");

          Object.defineProperty(keyboardEvent, 'keyCode', {
            get : function() {
              return this.keyCodeVal;
            }
          });
          Object.defineProperty(keyboardEvent, 'which', {
            get : function() {
              return this.keyCodeVal;
            }
          });
          var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
          keyboardEvent[initMethod](
             "keypress", // event type : keydown, keyup, keypress
             true, // bubbles
             true, // cancelable
             window, // viewArg: should be window
             false, // ctrlKeyArg
             false, // altKeyArg
             false, // shiftKeyArg
             false, // metaKeyArg
             code, // keyCodeArg : unsigned long the virtual key code, else 0
             0 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
          );
          keyboardEvent.keyCodeVal = code;
          if (element.dispatchEvent) element.dispatchEvent(keyboardEvent);  
          if (pletionFn) pletionFn();
    },

and in your test you will be calling keyEventDispatch(textboxes, 13);

Hope that helps

I encountered same issue that this was not working on Internet Explorer only (works with Firefox, Chrome fine) for our old code base using Dojo 1.5.0.

Turned out to be a bug in Dojo with IE's issue with hidden form and it was fixed by this patch.