Question

我正在使用mottie virtual keyboard并且效果很好。

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

{{1}}

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

如何解决这个问题？

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虚拟键盘中更改自定义键的显示名称

1 个答案: