Dynamically Change Key Text

[hslorenzo]

Hi,

Is there a way to change a key (or action key) text dynamically? What I'm trying to do is to change the key text of {next] button to 'Submit' when last input box is in focus.
Here is my js code:

$.keyboard.keyaction.next = function (base) {
      var parent_fieldset = $('#' + base.el.name).parents('fieldset');
      var $prevInput = $('#' + parent_fieldset.attr("id") + ' input:eq(-2)');     
     
     //If 2nd to the last input is in focus
      if ($prevInput.attr("id") == base.el.name) {

              setTimeout(function () {
                  var keyboard = $('.keyboard-normal').keyboard().getkeyboard();
                  keyboard.options.display.next = 'Submit';
                  //keyboard.redraw();
                  $('.ui-keyboard-next').find("span:contains('Go')").text('Submit');
              }, 500);
       }
      

      base.switchInput(true, base.options.autoAccept);
      return false;

  };

It seems to work but when my mouse exited the button the text reverts back to 'Next'.

Thank you in advance.

[Mottie]

Hi @hslorenzo!

I would instead use the visible callback function as follows (demo)

visible: function(e, keyboard, el) {
  if ($(el).hasClass('last')) {
    keyboard.$keyboard.find('.ui-keyboard-next')
      .text('Submit')
      .attr('data-html', '<span class="ui-keyboard-text">Submit</span>');
  }
}

The part you needed was to modify the data-html attribute as it is used when you unhover the key; this is because of the mousewheel option allowing you to scroll through the other keysets.

[hslorenzo]

Wow! that was quick 👍

I just tried it and it works! You are really awesome. Thank you :)