Can you add a keyboard layout change feature like this one?

[MonsterMMORPG]

I see that we are able to set layout like this

  jQuery.keyboard.layouts['Greek-custom'] = {
    "lang": ["el"],
    // Greek
    "normal": [
      "\\ 1 2 3 4 5 6 7 8 9 0 ' ] {bksp}",
      "{tab} : w ε ρ τ υ θ ι ο π + }",
      "α σ δ φ γ η ξ κ λ \u0384 \u00A8 # {enter}",
      "{shift} < ζ χ ψ ω β ν μ , . - {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ],
    "shift": [
      "| ! \" # $ % & / ( ) = ? [ {bksp}",
      "{tab} ; W Ε Ρ Τ Υ Θ Ι Ο Π Ş + }",
      "Α Σ Δ Φ Γ Η Ξ Κ Λ \u00A8 \u0385 @ {enter}",
      "{shift} < Ζ Χ Ψ Ω Β Ν Μ ; : _ {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ],
    // latin characters
    "alt": [
      "\\ 1 2 3 4 5 6 7 8 9 0 ' ] {bksp}",
      "{tab} q w e r t y u i o p + }",
      "a s d f g h j k l \u0384 \u00A8 # {enter}",
      "{shift} < z x c v b n m , . - {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ],
    "alt-shift" : [
      "| ! \" # $ % & / ( ) = ? [ {bksp}",
      "{tab} Q W E R T Y U I O P * {",
      "A S D F G H J K L \u00A8 \u0385 @ {enter}",
      "{shift} > Z X C V B N M ; : _ {shift}",
      "{accept} {alt} {space} {alt} {cancel}"
    ]
  };

  $('#keyboard').keyboard({
    layout: 'Greek-custom',

  });

Now i think i can define multiple languages like that

But can you add an option that users can select between defined layouts?

How can i achieve it?

Here an example of what i am talking

Moreover i see that you already have many layouts here : https://github.com/Mottie/Keyboard/tree/master/layouts

So how can i initialize the keyboard with multiple selectable layout is this possible?

And i want it to be activated by a button click rather than clicking on a textbox

[Mottie]

Hi @MonsterMMORPG!

I have been wanting to add something similar to this for a while now, but I would like to rewrite this plugin in plain js. And in the rewrite, I'll include this ability.

I'm out of the country right now, and I'll be back next week... the rewrite is high up on my to do list.

[Mottie]

Alternatively, you can add an action key to switch the layout... I'll provide an example next week some time once I catch up with all my emails. Also check out the home wiki page for a bunch of demos

[MonsterMMORPG]

@Mottie ty very much. i suppose rewrite would take months. a temporary simple solution would work for me at the moment as i need urgent :D ty very much

[Mottie]

Sorry for the delay... recovering from jet lag!

Try this demo - it includes the keyboard-layouts-microsoft.min.js file which has all the language files:

$(function() {

  $.keyboard.keyaction.de = function(kb) {
    kb.redraw("de");
  };
  $.keyboard.layouts.de = {
    lang: ["de"],
    normal: [
      "^ 1 2 3 4 5 6 7 8 9 0 ß ´ {bksp}",
      "{tab} q w e r t z u i o p ü +",
      "a s d f g h j k l ö ä # {enter}",
      "{s} < y x c v b n m , . - {s}",
      "{a} {alt} {space} {alt} {c} {de} {en}"
    ],
    shift: [
      '° ! " § $ % & / ( ) = ? ` {bksp}',
      "{tab} Q W E R T Z U I O P Ü *",
      "A S D F G H J K L Ö Ä ' {enter}",
      "{s} > Y X C V B N M ; : _ {s}",
      "{a} {alt} {space} {alt} {c} {de} {en}"
    ],
    alt: [
      "{empty} {empty} ² ³ {empty} {empty} {empty} { [ ] } \\ {empty} {bksp}",
      "{tab} @ {empty} € {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} ~",
      "{empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {enter}",
      "{s} | {empty} {empty} {empty} {empty} {empty} {empty} µ {empty} {empty} {empty} {s}",
      "{a} {alt} {space} {alt} {c} {de} {en}"
    ]
  };
  $.keyboard.keyaction.en = function(kb) {
    kb.redraw("en");
  };
  $.keyboard.layouts.en = {
    'normal': [
      '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
      '{tab} q w e r t y u i o p [ ] \\',
      'a s d f g h j k l ; \' {enter}',
      '{shift} z x c v b n m , . / {shift}',
      '{accept} {space} {cancel} {de} {en}'
    ],
    'shift': [
      '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
      '{tab} Q W E R T Y U I O P { } |',
      'A S D F G H J K L : " {enter}',
      '{shift} Z X C V B N M < > ? {shift}',
      '{accept} {space} {cancel} {de} {en}'
    ]
  };

  $('#keyboard')
    .keyboard({
      layout: 'en'
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });
});

[MonsterMMORPG]

awesome

thank you very much

i can use it for now since i will have only 3 keyboards right now :)

dropdown list would be much better though :)

On Thu, Mar 9, 2017 at 11:28 PM, Rob Garrison notifications@github.com wrote:

Sorry for the delay... recovering from jet lag!

Try this demo http://jsfiddle.net/Mottie/egb3a1sk/2504/ - it includes the keyboard-layouts-microsoft.min.js file which has all the language files:

$(function() {

$.keyboard.keyaction.de = function(kb) { kb.redraw("de"); }; $.keyboard.layouts.de = { lang: ["de"], normal: [ "^ 1 2 3 4 5 6 7 8 9 0 ß ´ {bksp}", "{tab} q w e r t z u i o p ü +", "a s d f g h j k l ö ä # {enter}", "{s} < y x c v b n m , . - {s}", "{a} {alt} {space} {alt} {c} {de} {en}" ], shift: [ '° ! " § $ % & / ( ) = ? {bksp}', "{tab} Q W E R T Z U I O P Ü *", "A S D F G H J K L Ö Ä ' {enter}", "{s} > Y X C V B N M ; : _ {s}", "{a} {alt} {space} {alt} {c} {de} {en}" ], alt: [ "{empty} {empty} ² ³ {empty} {empty} {empty} { [ ] } \\ {empty} {bksp}", "{tab} @ {empty} € {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} ~", "{empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {enter}", "{s} | {empty} {empty} {empty} {empty} {empty} {empty} µ {empty} {empty} {empty} {s}", "{a} {alt} {space} {alt} {c} {de} {en}" ] }; $.keyboard.keyaction.en = function(kb) { kb.redraw("en"); }; $.keyboard.layouts.en = { 'normal': [ ' 1 2 3 4 5 6 7 8 9 0 - = {bksp}', '{tab} q w e r t y u i o p [ ] \', 'a s d f g h j k l ; \' {enter}', '{shift} z x c v b n m , . / {shift}', '{accept} {space} {cancel} {de} {en}' ], 'shift': [ '~ ! @ # $ % ^ & * ( ) _ + {bksp}', '{tab} Q W E R T Y U I O P { } |', 'A S D F G H J K L : " {enter}', '{shift} Z X C V B N M < > ? {shift}', '{accept} {space} {cancel} {de} {en}' ] };

$('#keyboard') .keyboard({ layout: 'en' }) // activate the typing extension .addTyping({ showTyping: true, delay: 250 }); });

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Mottie/Keyboard/issues/532#issuecomment-285472375, or mute the thread https://github.com/notifications/unsubscribe-auth/AD9Q4oUQxuoJaNiXeW9D-TXU6kLwESdnks5rkGDQgaJpZM4MOaRJ .

[MonsterMMORPG]

Where can i find default layouts for Turkish and Arabic?

So i can add them to your example

On Fri, Mar 10, 2017 at 5:33 PM, Furkan Gözükara monstermmorpg@gmail.com wrote:

awesome

thank you very much

i can use it for now since i will have only 3 keyboards right now :)

dropdown list would be much better though :)

On Thu, Mar 9, 2017 at 11:28 PM, Rob Garrison notifications@github.com wrote:

Sorry for the delay... recovering from jet lag!

Try this demo http://jsfiddle.net/Mottie/egb3a1sk/2504/ - it includes the keyboard-layouts-microsoft.min.js file which has all the language files:

$(function() {

$.keyboard.keyaction.de = function(kb) { kb.redraw("de"); }; $.keyboard.layouts.de = { lang: ["de"], normal: [ "^ 1 2 3 4 5 6 7 8 9 0 ß ´ {bksp}", "{tab} q w e r t z u i o p ü +", "a s d f g h j k l ö ä # {enter}", "{s} < y x c v b n m , . - {s}", "{a} {alt} {space} {alt} {c} {de} {en}" ], shift: [ '° ! " § $ % & / ( ) = ? {bksp}', "{tab} Q W E R T Z U I O P Ü *", "A S D F G H J K L Ö Ä ' {enter}", "{s} > Y X C V B N M ; : _ {s}", "{a} {alt} {space} {alt} {c} {de} {en}" ], alt: [ "{empty} {empty} ² ³ {empty} {empty} {empty} { [ ] } \\ {empty} {bksp}", "{tab} @ {empty} € {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} ~", "{empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {enter}", "{s} | {empty} {empty} {empty} {empty} {empty} {empty} µ {empty} {empty} {empty} {s}", "{a} {alt} {space} {alt} {c} {de} {en}" ] }; $.keyboard.keyaction.en = function(kb) { kb.redraw("en"); }; $.keyboard.layouts.en = { 'normal': [ ' 1 2 3 4 5 6 7 8 9 0 - = {bksp}', '{tab} q w e r t y u i o p [ ] \', 'a s d f g h j k l ; \' {enter}', '{shift} z x c v b n m , . / {shift}', '{accept} {space} {cancel} {de} {en}' ], 'shift': [ '~ ! @ # $ % ^ & * ( ) _ + {bksp}', '{tab} Q W E R T Y U I O P { } |', 'A S D F G H J K L : " {enter}', '{shift} Z X C V B N M < > ? {shift}', '{accept} {space} {cancel} {de} {en}' ] };

$('#keyboard') .keyboard({ layout: 'en' }) // activate the typing extension .addTyping({ showTyping: true, delay: 250 }); });

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Mottie/Keyboard/issues/532#issuecomment-285472375, or mute the thread https://github.com/notifications/unsubscribe-auth/AD9Q4oUQxuoJaNiXeW9D-TXU6kLwESdnks5rkGDQgaJpZM4MOaRJ .

[Mottie]

Adding a dropdown is possible, but there are some issues right now.

Because clicking anywhere inside the keyboard takes focus away from the input, the plugin puts the focus back to the input. So selecting a dropdown inside the keyboard is a bit troublesome - demo - to make it work, click and hold the mouse down on the select, then use arrow keys to make your choice. Not a very good UI.

Moving the dropdown outside the keyboard works better - demo:

HTML

<div>Select Language: <select></select></div>
<br>
<input id="keyboard" type="text" />

Script

$(function() {

  var languages = {
    "ar": {
      layout: "ms-Arabic (101)",
      name: "Arabic (\u0627\u0644\u0639\u0631\u0628\u064a\u0629)"
    },
    "de": {
      layout: "ms-German",
      name: "German (Deutsch)"
    },
    "en": {
      layout: "qwerty",
      name: "English"
    },
    "tr": {
      layout: "ms-Turkish F",
      name: "Turkish (T\u00fcrk\u00e7e)"
    }
  }

  function selectLang(lang) {
    var obj = languages[lang],
      kb = $('#keyboard').getkeyboard();
    if (obj) {
      kb.options.language = lang;
      kb.redraw(obj.layout);
    }
  };

  function addLang() {
    var html = '';
    Object.keys(languages).forEach(function(language) {
      html += `<option value="${language}">${languages[language].name}</option>`;
    });
    $('select')
      .html(html)
      .val($('#keyboard').getkeyboard().options.language || "en")
      .change(function() {
        selectLang(this.value);
      });
  }

  $('#keyboard')
    .keyboard({
      usePreview: false
    })
    // activate the typing extension
    .addTyping({
      showTyping: true,
      delay: 250
    });
  addLang();

});

[Mottie]

Oh, and the Arabic and Turkish language and layouts are contained in each of the following files (you'll need to find the specific layout names since they are named differently in each file):

• keyboard-layouts-microsoft.min.js - used in the demo above.
• keyboard-layouts-greywyvern.min.js.
• keyboard-layouts-combined.min.js.

[MonsterMMORPG]

thank you very much again. unfortunately that inline drop down is not useable at the moment. however outside dropdown looks good. although it will take some space :)

layouts will help me a lot :)

On Fri, Mar 10, 2017 at 9:32 PM, Rob Garrison notifications@github.com wrote:

Oh, and the Arabic and Turkish language and layouts are contained in each of the following files (you'll need to find the specific layout names since they are named differently in each file):

• keyboard-layouts-microsoft.min.js https://mottie.github.io/Keyboard/dist/layouts/keyboard-layouts-microsoft.min.js
• used in the demo above.
• keyboard-layouts-greywyvern.min.js https://mottie.github.io/Keyboard/dist/layouts/keyboard-layouts-greywyvern.min.js .
• keyboard-layouts-combined.min.js https://mottie.github.io/Keyboard/dist/layouts/keyboard-layouts-combined.min.js .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Mottie/Keyboard/issues/532#issuecomment-285747928, or mute the thread https://github.com/notifications/unsubscribe-auth/AD9Q4iKfyXn9PkkLmNFS4IHqFYkjwBlvks5rkZc9gaJpZM4MOaRJ .

[MonsterMMORPG]

And may i ask 1 more thing? The cancel button explicitly cancels it. However when we click outside it still cancels. Any way to make it accept if click someplace out and closes keyboard instead of cancel?

Thank you.

On Sat, Mar 11, 2017 at 12:19 AM, Furkan Gözükara monstermmorpg@gmail.com wrote:

thank you very much again. unfortunately that inline drop down is not useable at the moment. however outside dropdown looks good. although it will take some space :)

layouts will help me a lot :)

On Fri, Mar 10, 2017 at 9:32 PM, Rob Garrison notifications@github.com wrote:

Oh, and the Arabic and Turkish language and layouts are contained in each of the following files (you'll need to find the specific layout names since they are named differently in each file):

• keyboard-layouts-microsoft.min.js https://mottie.github.io/Keyboard/dist/layouts/keyboard-layouts-microsoft.min.js
• used in the demo above.
• keyboard-layouts-greywyvern.min.js https://mottie.github.io/Keyboard/dist/layouts/keyboard-layouts-greywyvern.min.js .
• keyboard-layouts-combined.min.js https://mottie.github.io/Keyboard/dist/layouts/keyboard-layouts-combined.min.js .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Mottie/Keyboard/issues/532#issuecomment-285747928, or mute the thread https://github.com/notifications/unsubscribe-auth/AD9Q4iKfyXn9PkkLmNFS4IHqFYkjwBlvks5rkZc9gaJpZM4MOaRJ .

[Mottie]

There are several options you might want to check out:

• autoAccept
• closeByClickEvent
• stayOpen
• userClosed

[MonsterMMORPG]

Awesome. Thank you very much for all help.

On Sat, Mar 11, 2017 at 1:11 AM, Rob Garrison notifications@github.com wrote:

There are several options you might want to check out:

• autoAccept https://github.com/Mottie/Keyboard/wiki/Usability#autoaccept
• closeByClickEvent https://github.com/Mottie/Keyboard/wiki/Usability#closebyclickevent
• stayOpen https://github.com/Mottie/Keyboard/wiki/Usability#stayopen
• userClosed https://github.com/Mottie/Keyboard/wiki/Usability#userclosed

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Mottie/Keyboard/issues/532#issuecomment-285798896, or mute the thread https://github.com/notifications/unsubscribe-auth/AD9Q4gtvxMYiLrbpvCsTp_Kf8wCGFo7Pks5rkcqAgaJpZM4MOaRJ .