[FEAT] - Add Enter button

[inovosel]

I would like to end typing text into the search input field by pressing Enter, but I'm not sure if there is a way to add Enter key to the keyboard layout.

I've tried using the 'input' event listener on the input field to filter search results as you type so there wouldn't be a need for Enter/Return button, but while the event is triggered while using a real keyboard, it is not triggered when using KioskBoard virtual keyboard.

Adding an Enter button to the virtual keyboard, that would end entry to the input field and remove the onscreen keyboard could solve my problem.

[Moonbird-IT]

Definitely a workaround but you might switch the focus onto the body element and trigger a click event to hide the keyboard. If you would also like to call a function (i.e. executing a search), something like this might work:

HTML:

<input type="text" id="search-field">

JS:

  let addKeyboard = function(selectorRegular, callback) {
    KioskBoard.Run(selectorRegular);

    $('body').on('click', '.kioskboard-key-enter', function() {
      $('body').focus().click();
      if (callback) {
        callback();
      }
    });
  }

  let executeSearch = function() {
    ...
  }

  addKeyboard('#search-field', executeSearch);

[Adesh66]

Hey In my project we need an enter button to close the keyboard. we found that users don't know how to close it.. so sometimes they face issue with keyboard when they are done with their input data.

Can you please help me when it'll be available?

[Moonbird-IT]

Hello Adesh, would you need the physical enter key to close the virtual keyboard or are you talking about the virtual keyboard key? If the latter is the case, have you tried what I had posted above (without the callback)?

[Adesh66]

Hey @Moonbird-IT I need this enter key in my virtual keyboard. I'm using this in React.

[furcan]

https://github.com/furcan/KioskBoard/releases/tag/v2.3.0