switching shift button view.

[bsurai]

Hi. I'd like to have different views for shift button when shifting to lower and upper case. Is it possible to make settings as below?

let keyboardOptions:  = {
    display: {
...
        "S": `ABC`, // 'shift' to upper case
        "s": `abc`,  // 'shift' to lower case
    },
...

[Mottie]

Hi @bsurai!

It is not currently possible to display two different values for the shift key, but you could set the display to the letter "s" then use css to change the appearance of the uppercase version - demo

CSS

.ui-keyboard-keyset-shift .ui-keyboard-shift {
  text-transform: uppercase;
}

Script

$(function() {
  $("#keyboard").keyboard({
    display: {
      shift: "s"
    }
  });
});

Or, you could use the visible callback function to target and directly change the key's displayed text (in 2 places; demo):

$(function() {
  $("#keyboard").keyboard({
    display: {
      shift: "s" // lower case displayed value
    },
    visible: function(e, kb) {
      // change uppercase displayed value
      var $shift = kb.$keyboard.find(
        ".ui-keyboard-keyset-shift .ui-keyboard-shift"
      );
      $shift
        .attr("data-html", '<span class="ui-keyboard-text">S</span>')
        .find("span")
        .text("S");
    }
  });
});

[bsurai]

Yep. I have used css.

[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.