Enter do Submit

[pilonscv]

Hello,
It is possible make the key enter do the form submit?

Thanks

[Mottie]

Hi pilonscv!

You could just set the autoAccept option to true and leave the enterNavigation option set as true to allow you to use enter to switch between inputs. There is also an acceptValid function you could add to ensure the content the user is trying to enter is valid.

Alternatively, you could set the enterNavigation option to false and change the enter key functionality as described in this issue.

All of the options described here are covered in more depth in the documentation.

[pilonscv]

Hello Mottie,

I change what you say but nothing works...

I have a form to search in my site, i need when the user press enter in the virtual keyboard the form submit...

Thanks once again

[Mottie]

Please share some HTML and the initialization code, I'm not psychic although you really shouldn't be eating donuts over your keyboard :P

[pilonscv]

LOLOL

Form code, from oscommerce,

<?
$info_box_contents = array();
  $info_box_contents[] = array('form' => tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get'),
                               'align' => 'left',
                               'text'  => '<div align="center"><input type="text" id="keyboard" name="keywords" size="30" maxlength="40" style="width:400px;font-size:30px;' . htmlspecialchars(StripSlashes(@$HTTP_GET_VARS["keywords"])). '"><br><br><input type="image" src="images/button_quick_find.gif" border="0" alt="Pesquisa" title=" Search " ALIGN="ABSMIDDLE"><div align="left"><a href="' . tep_href_link(FILENAME_ADVANCED_SEARCH) . '"></a></div></div>'
                              );
  new infoBox($info_box_contents);
?>

[pilonscv]

Can you see all the code???

Can´t see all...

[Mottie]

Indent the code with 4 spaces to see it.

Do you have like HTML and javascript? I barely know any php.

[pilonscv]

Mottie,
This is oscommerce i can´t change de language...

As you can see the <form> start array('form' => tep_draw_form...

Next i have the field <input type="text" id="keyboard"> and i call the "keyboard"

The form name is quick_find... if we can put the code to submit in the enter or the apply is great.

A simple button to submit is <input type="submit" value="OK" /> as you know.

[Mottie]

What I'd like to see is the HTML from the page after it has been rendered. If you are using Chrome, right click on the input and find the start of the form, then right click again and select "Copy as HTML". Then paste it into here.

And I still haven't seen the keyboard initialization code - the javascript.

[pilonscv]

This?

<form name="quick_find" action="http://localhost:90/boceto//advanced_search_result.php" method="get"><div align="center"><input type="text" id="keyboard" name="keywords" size="30" maxlength="40" style="width:400px;font-size:30px;" class="ui-keyboard-input ui-widget-content ui-corner-all" aria-haspopup="true" role="textbox"><br><br><div class="botaopesquisa"><input type="image" src="images/button_quick_find.gif" border="0" alt="Pesquisa" title=" Search " align="ABSMIDDLE"></div><div align="left"><a href="http://localhost:90/boceto//advanced_search.php?osCsid=b2ef4eff1cb967a2fad8ef011a7e87bc"></a></div></div></form>

[Mottie]

Yes, that does help... the HTML looks fine. Now I need the javascript.

[pilonscv]

This,

        <link href="css/jquery-ui.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>

    <!-- keyboard widget css & script (required) -->
    <link href="css/keyboard.css" rel="stylesheet">
    <script src="js/jquery.keyboard.js"></script>

    <!-- keyboard extensions (optional) -->
    <script src="js/jquery.mousewheel.js"></script>
    <!--
    <script src="js/jquery.keyboard.extension-typing.js"></script>
    <script src="js/jquery.keyboard.extension-autocomplete.js"></script>
    -->
    <script src="layouts/catalan.js" type="text/javascript"></script>

    <!-- initialize keyboard (required) -->
    <script>
        $(function(){
            $('#keyboard').keyboard({ layout: 'catalan-qwerty' });
            //$('input').keyboard({ layout: 'catalan-qwerty' });

$('#open-icon').click(function(){
    $('#keyboard').getkeyboard().reveal(); // show the keyboard
});


        });
    </script>

[Mottie]

Hmm, ok try this then:

<!-- initialize keyboard (required) -->
<script>
  $(function(){
    $('#keyboard').keyboard({
      layout : 'catalan-qwerty',
      autoAccept : true,
      enterNavigation : true
    });

    $('#open-icon').click(function(){
      $('#keyboard').getkeyboard().reveal(); // show the keyboard
    });

  });
</script>

[pilonscv]

Thanks for your try but still dont work... press enter and nothing... press apply close the interface...

Thnaks

[Mottie]

Ahh ok, I understand the problem now.

The first issue is that pressing enter while an input has focus, on your real keyboard will be ignored by the plugin. This is because it would submit the content, which is what you want.

Clicking on the enter button on the virtual keyboard will accept the content, but won't submit the form, so I think I need to modify the plugin a bit to use the enter key action, then you could add this:

$.extend($.keyboard.keyaction, {
  enter : function(kb) {
    // accept the content and close the keyboard
    kb.accept();
    // submit the form
    kb.$el.closest('form').submit();
  }
});

Here is a demo of what happens now... press enter or shift-enter and it will accept but not submit the form. Click on the enter button and it will submit.

Pressing shift-enter should work right now (not submit), but since you only have one input, the enterNavigation option doesn't appear to work, but it does. It's just keeping the keyboard open because it can't find another input to give focus to open the next keyboard. So it gives focus back to the same keyboard. Click outside of the keyboard and you will see that the content was accepted.

So, if you need the enter key alone (not shift-enter) to submit the content, then I'll need to modify the plugin.

[pilonscv]

Mottie

It works man ehhe

Unbelievable... now i put something to search press "enter" virtual key anda voilá lol

Thanks a lot man... you are the special one ;)

I thing this maybe will help more users...

Once again thanks

[Mottie]

Did you need the actual keyboard "enter" key to do the same? I was looking into fixing the plugin so pressing the real keyboard enter key to do the same thing.

[Mottie]

In the latest update, pressing enter on the keyboard will now call the same keyaction as clicking on the enter. So now both should submit the form using the code above. :)

[pilonscv]

Hello Mottie,

I think i dont need, because we will use this site in the touchscreen... so we dont have a real keyboard...

But i will save the code to the future,

Thanks,

[Mottie]

Ok, thanks... I'm going to close this issue then :)

[pilonscv]

Hello Mottie,

Remember me? i am back LOL

I install this plugin in joomla site, everything works well, but the enter key dont submit the form... the enter dont do nothing...

My script

<script type="text/javascript">
jQuery.noConflict();
</script>


<script>
jQuery(function(){
jQuery('#keyboard').keyboard({
      autoAccept : true,
      enterNavigation : true
    });
        jQuery('#open-icon').click(function(){
      jQuery('#keyboard').getkeyboard().reveal(); // show the keyboard
    });


});
jQuery.extend($.keyboard.keyaction, {
  enter : function(kb) {
    // accept the content and close the keyboard
    kb.accept();
    // submit the form
    kb.$el.closest('form').submit();
  }
});     
</script>

Can you help me, thanks a lot.

[Mottie]

I wonder if the problem is due to the enterNavigation also being true. Try setting that to false and see if that helps.

I'm going to be busy today so I don't have time to test it. Thanks!

[pilonscv]

Hello Mottie,

I change this, but nothing happens... please give me a help.

Thanks