Ahmed Ahmed - 4 months ago 41
Javascript Question

How to change display name of custom keys in mottie virtual keyboard

I'm using mottie virtual keyboard and it's working well.

I created a custom button for language switcher between

Arabic
and
English
language, by default it's showing
English
as a default language.

When this button is clicked it's switching language correctly but not change display name of
langSwitcher
key.



$("#searchInput").keyboard({
language: 'en',// default language
keyBinding: 'mousedown touchstart',
layout: 'qwerty',
caretToEnd: true,
autoAccept: true,
usePreview: false,
appendLocally: true,
autoAcceptOnValid: true,
display: {
langSwitcher: 'English',

},
container: {theme: 'b', cssClass: 'ui-body'},
});

$.keyboard.keyaction.langSwitcher = function (keyboard) {

if (keyboard.options.language == 'en') {
keyboard.options.display.langSwitcher = "English";
keyboard.options.layout = 'ms-Arabic (102)';
keyboard.options.language = 'ar';


} else {
keyboard.options.display.langSwitcher = 'عربي';
keyboard.options.layout = 'qwerty';
keyboard.options.language = 'en';

}
console.log(keyboard.options.display.langSwitcher);
keyboard.redraw();
};

<link href="https://mottie.github.io/Keyboard/docs/css/bootstrap.min.css" rel="stylesheet">

<link href="https://mottie.github.io/Keyboard/docs/css/font-awesome.min.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/docs/css/jquery-ui.min.css" rel="stylesheet">

<!-- keyboard widget css & script (required) -->
<link href="https://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet">
<link href="https://mottie.github.io/Keyboard/css/keyboard-previewkeyset.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/bootstrap.min.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/js/jquery.keyboard.js"></script>

<!-- keyboard extensions (optional) -->
<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-previewkeyset.js"></script>

<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/layouts/keyboard-layouts-microsoft.min.js"></script>
Search : <input type='text' name='q' id='searchInput' />





I tried to print the display name in console when language changing.

it's changed to the new language and new name but not appear on button text.

How to solve this issue?

Answer

If I'm right you have to describe localization to your button:

$(document).ready(function() {
   $("#searchInput").keyboard({
      language: 'en',// default language
      keyBinding: 'mousedown touchstart',
      layout: 'qwerty',
      caretToEnd: true,
      autoAccept: true,
      usePreview: false,
      appendLocally: true,
      autoAcceptOnValid: true,
      container: {theme: 'b', cssClass: 'ui-body'},
    });
    
    // important part is here!
    $.keyboard.language = {
        ar: {
            display: {
                langSwitcher: 'English'
            }
        },
        en: {
            display: {
                langSwitcher: 'عربي'
            }
        }
    };
    
    $.keyboard.keyaction.langSwitcher = function (keyboard) {
      if (keyboard.options.language == 'en') {
        keyboard.options.layout = 'ms-Arabic (102)';
        keyboard.options.language = 'ar';
      } else {
        keyboard.options.layout = 'qwerty';
        keyboard.options.language = 'en';

      }
      console.log(keyboard.options.display.langSwitcher);
      keyboard.redraw();
    }; 
});
<!DOCTYPE html>
<html>
<head>
  <link href="https://mottie.github.io/Keyboard/docs/css/bootstrap.min.css" rel="stylesheet">

	<link href="https://mottie.github.io/Keyboard/docs/css/font-awesome.min.css" rel="stylesheet">
	<link href="https://mottie.github.io/Keyboard/docs/css/jquery-ui.min.css" rel="stylesheet">

	<!-- keyboard widget css & script (required) -->
	<link href="https://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet">
	<link href="https://mottie.github.io/Keyboard/css/keyboard-previewkeyset.css" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/jquery-ui.min.js"></script>
<script src="https://mottie.github.io/Keyboard/docs/js/bootstrap.min.js"></script>
<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/js/jquery.keyboard.js"></script>

	<!-- keyboard extensions (optional) -->
	<script src="https://mottie.github.io/Keyboard/js/jquery.mousewheel.js"></script>
	<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-typing.js"></script>
	<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.extension-previewkeyset.js"></script>

	<script src="http://samsung.developnet.net/assets/js/plugins/vkeyboard/dist/layouts/keyboard-layouts-microsoft.min.js"></script>

</head>
<body>
Search : <input type='text' name='q' id='searchInput' />
</body>
</html>

  1. Sample from documentation
  2. JSBin
Comments