enter button

[cdenley]

For a text input, pressing enter on the virtual or real keyboard should act as if the user is pressing enter on the actual text input (after accepting the new text). Typically, I think this would be a form submit. Pressing "accept" would replace the text without submitting the form.

Also, I think clicking outside of the virtual keyboard should perform an accept. Perhaps make that optional if some people prefer that the "accept" button must be clicked in order to change any values. Personally, I would prefer the keyboard modify the text input directly rather than create its own, but I guess it looks better when its text input uses the entire width of the virtual keyboard.

[Mottie]

Hi Cdenley!

There is an autoAccept option (just set it to true) to automatically accept the content of the virtual keyboard when clicking outside the keyboard. I guess I forgot to update the documentation.

As for pressing Enter to submit, I think you could just bind to the "change" event to figure out if the enter key was pressed... I might need to provide the actual keycode of the key pressed since it isn't provided. Another option would be to modify the internal keyaction function in the script manually... I'll work out the details for you, but I don't think I'll change the base code to automatically submit on pressing enter.

[cdenley]

Thanks. I was hoping instead of submitting the form on enter to trigger a keypress event and let the browser do whatever it normally would do when the real enter key is pressed. Apparently this isn't even possible, though. Using dispatchEvent with key code 13 is not the same as physically pressing the enter button.

Maybe I will just forget about submitting on enter for now. I'm trying to replace an internet kiosk product, and was hoping to maintain the same functionality in the original on-screen keyboard. I've noticed some users do submit forms with the on-screen keyboard's enter button, and having an enter button which does nothing may be a bit confusing for them.

By the way, if the user is typing in the middle of a string and presses the enter key, it adds a space then moves the current position to the right one more character.

[cdenley]

Wait, I just remembered why I need to be able to submit on enter. The kiosks also have a barcode scanner. After each barcode is scanned, it simulates an enter keypress. This must be preserved. When your virtual keyboard is used, the barcode scanner will use the barcode data, but will not submit the form. If you can help me get around this I would appreciate it, because I can't use this solution otherwise.

[cdenley]

I got it all figured out. I had to modify the event triggers for when a virtual key is pressed and for when a real key is pressed in order for the event handler to know which key was accessed and in order to have the jquery object so I can call close(true) to accept the changes before I submit the form. I also wrote some javascript to add the "ui-keyboard-input" class to all text input fields before the $('.ui-keyboard-input').keyboard(); so I just have to add the javascript and css files without editing any html.

Now the only problem is the enter key will still add a space if the current position is not the end when enter is pressed. I'm not too concerned about that, though. I can finally start implementing this keyboard. Thanks for pointing me in the right direction.

[Mottie]

Hi Cdenley!

I'll be updating the keyboard script shortly to make it easy to modify the key action. So you should be able to do this to change the enter key functionality:

$.keyboard.keyaction.enter = function(base){
  if (base.el.tagName === "INPUT") {
    base.accept();      // accept the content
    $('form').submit(); // submit form on enter
  } else {
    base.insertText('\r\n'); // textarea
  }
};

This will also make it so you don't need to bind to the event triggers.

[cdenley]

Great! That will work when the user presses a real or virtual enter key? Thanks.

[Mottie]

Hi Cdenley!

I just updated the script last night where I added an option called "usePreview". When set to false, the keyboard will appear below the original input. So using that option should directly submit the form. I haven't tested it and I think the keyboard should close after pressing enter, but you can always close the keyboard manually if it doesn't :)

[cdenley]

Perfect! The changes you made were just what I needed. I also managed to allow the keyboard to be toggled on or off for a text input but still allow focus without the virtual keyboard. This would focus the text input without pulling up the keyboard:

var base=$(el).getkeyboard();
base.accept();
base.isVisible=true;
el.focus();
base.isVisible=false;