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

Posted

技术标签:

【中文标题】如何更改 mottie 虚拟键盘中自定义键的显示名称【英文标题】：How to change display name of custom keys in mottie virtual keyboard 【发布时间】：2016-07-18 10:14:30 【问题描述】：

我正在使用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' />

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

如何解决这个问题？

【问题讨论】：

【参考方案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>
    Sample from documentation JSBin

【讨论】：

Yesss 就是这样.. 非常感谢

以上是关于如何更改 mottie 虚拟键盘中自定义键的显示名称的主要内容，如果未能解决你的问题，请参考以下文章

Mottie 虚拟键盘和选择器

Mottie 的虚拟键盘关闭验证为真

带有引导主题的 Mottie 虚拟键盘

当用户单击javascript mottie虚拟键盘键之间的小空间时，有没有办法防止焦点从元素模糊？

如何在 Xcode 5 中自定义默认键盘

github上老外做的jQuery虚拟键盘