Open Keyboard programmatically

[iArnoldo]

Hey this is rather a question than an issue, tho i hope i can still find some help.
So i have a input field which will be added dynamically on a click event. Unfortunatly in this state the virtual Keyboard will not open.

So my question is, can i somehow open the keyboard programmatically with a method like open() or a class add?

[Mottie]

Hi @iArnoldo!

Check out the main "playground" demo... click on the keyboard icon to see it working. The code is at the bottom of the JS frame.

Here is the documentation on the reveal method.

[iArnoldo]

Hi @Mottie ,
thats exactly what i needed thank you. But unfortunately i got another problem maybe you have some advice. So in my application i have a Normal Table <table><thead></thead><tbody></tbody</table> with dynamic content. The Column Cells of the Table are editable once they are clicked. I do this by adding an input field to the cell. And this Input field has the required markup for the keyboard plugin. Unfortunately the keyboard is not opening on the click. Even tho the input field is focused, thats probably because it gets added dynamically. To fix this problem i created a hidden input which is available on document ready. When the Column cell is clicked i detach that input field and insert it into the cell and focus the input. As a result the keyboard now opens up once i click on that table cell. After editing that cell i recreate the hidden input and remove it from the table i do this, once the input loses focus. After clicking another Table Cell i get the same error as in the beginning. "Cannot read property of 'reveal' of undefined". Do you have any advice how i could apply the keyboard plugin to such a editable Table? P.S. Tommoroww i will add a fiddle/codepen to this question

[Mottie]

In the latest version of the keyboard plugin, you can add the keyboard to contenteditable elements.

If that isn't what you want, then I would suggest initializing the keyboard on the input after it is added to the cell. To open the keyboard, after initialization, use the reveal method. And upon completion and before removing the input, make sure to destroy the keyboard instance.

Try this (demo):

HTML

<table>
  <thead>
    <th>Test</th>
  </thead>
  <tbody>
    <tr><td>edit me</td></tr>
    <tr><td>edit me</td></tr>
  </tbody>
</table>

Script

$(function() {
  $("table").on("click", "td", function(e) {
    var $cell = $(e.target),
      value = $cell.text();
    $cell.html('<input data-value="' + value + '" value="' + value + '">');
    initKB($cell.find("input"));
  });

  function initKB($input, value) {
    $input
      .keyboard({
        autoAccept: true,
        initialized: function(e, kb) {
          kb.reveal();
        }
      })
      // activate the typing extension
      .addTyping({
        showTyping: true,
        delay: 250
      })
      .on("accepted canceled", function(e, kb, el) {
        var value = e.type === "canceled" ? $(el).data("value") : el.value;
        removeKB($(el).closest("td"), value);
      });
  }

  function removeKB($cell, value) {
    $cell.find("input").getkeyboard().destroy();
    $cell.text(value);
  }
});

[iArnoldo]

Thank you so much, that fixed my problem. 😄 👍 ❤️

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.