如何更改 mottie 虚拟键盘中自定义键的显示名称

Question

我正在使用 mottie virtual keyboard 并且运行良好。

我为 Arabic 和 English 语言之间的语言切换器创建了一个自定义按钮，默认情况下它显示 English 作为默认语言。

单击此按钮时，它会正确切换语言，但不会更改 langSwitcher 键的显示名称。

$("#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' />

我尝试在更改语言时在控制台中打印显示名称。
它已更改为新语言和新名称，但未出现在按钮文本上。

如何解决这个问题？

Answer 1

如果我是对的，您必须描述按钮的本地化：

$(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>

如何更改 mottie 虚拟键盘中自定义键的显示名称

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

javascript

jquery

language-switching

virtual-keyboard