3

我正在使用mottie 虚拟键盘，它运行良好。

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' />

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

如何解决这个问题？

4

1 回答 1

3

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

$(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. 来自文档的样本
  2. JSBin
于 2016-07-18T11:30:25.947 回答