javascript - 无法让 mottie jQuery 键盘突出显示所选键-6ren

javascript - 无法让 mottie jQuery 键盘突出显示所选键

转载作者：行者123 更新时间：2023-11-28 07:34:47

Mottie 链接:https://github.com/Mottie/Keyboard

我正在使用带有“导航”和“移动”扩展名的 Mottie 键盘。除了未突出显示“当前 key ”外，它工作正常。我可以在键盘上导航并单击 enter，它会显示出来，但我无法直观地看到选择了哪个键。

根据文档和工作示例，在“样式”中添加我的代码片段应该可以解决问题，但它不会改变任何东西。

我的 HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>Virtual Keyboard Mobile Demo</title>

	<!-- demo -->
	<link href="css/demo.css" rel="stylesheet">

	<!-- jQuery & jQuery UI + theme (required) -->
	<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

	<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

	<!-- keyboard widget css & script (required) -->
	<link href="css/keyboard.css" rel="stylesheet">
	<script src="js/jquery.keyboard.js"></script>
	<script src="js/jquery.keyboard.extension-navigation.js"></script>

	<!-- keyboard extensions (optional) -->
	<script src="js/jquery.mousewheel.js"></script>

	<!--
	<script src="../js/jquery.keyboard.extension-typing.js"></script>
	<script src="../js/jquery.keyboard.extension-autocomplete.js"></script>
	-->
	<script src="js/jquery.keyboard.extension-mobile.js"></script>

	<style>
	html head + body .ui-btn.ui-btn-c:hover,
	html head + body .ui-btn.ui-btn-c.ui-btn-hover,
	html head + body .ui-btn.ui-btn-c:active,
	html head + body .ui-btn.ui-btn-c.ui-btn-active {
		background-color: #f7931e;
		border-color: #a37a00;
		color: #fff;
		text-shadow: 0 1px 0 #ffcc33;
	}

.ui-keyboard-button.ui-state-active.ui-state-hover {
  border: 1px solid #fff !important;
  -moz-box-shadow: 1px 1em 1px #ffba2b inset !important;
  -webkit-box-shadow: 1px 1em 1px #ffba2b inset !important;
  box-shadow: 1px 1em 1px #ffba2b inset !important;
}
/* Class added to indicate the virtual keyboard has navigation focus */
.hasFocus {
  border-color: #59b4d4 !important;
}
	</style>

	<!-- initialize keyboard (required) -->
</head>
<body id="mobile">
		<div id="wrap"> <!-- wrapper only needed to center the input -->
			<!-- keyboard input -->
			<label for="keyboard"></label>
<input id="keyboard" name="keyboard" type="text">
		</div> <!-- End wrapper -->

	<script>
	$(function() {

		$('#keyboard')
			.keyboard({
			})
			/* initial setup for mobile extension */
			.addMobile({
				// keyboard wrapper theme
				container    : { theme:'b' },
				// theme added to all regular buttons
				buttonMarkup : { theme:'b', shadow:'true', corners:'true' },
				// theme added to all buttons when they are being hovered
				buttonHover  : { theme:'a' },
				// theme added to action buttons (e.g. tab, shift, accept, cancel);
				// parameters here will override the settings in the buttonMarkup
				buttonAction : { theme:'c' },
				// theme added to button when it is active (e.g. shift is down)
				// All extra parameters will be ignored
				buttonActive : { theme:'c' }
			});

			$('#keyboard')
				.keyboard({
				})
				.addNavigation({
					position   : [0,0],     // set start position [row-number, key-index]
					toggleMode : true,     // true = navigate the virtual keyboard, false = navigate in input/textarea
					focusClass : 'hasFocus' // css class added to the keyboard when toggle mode is on
				});
});
	</script>

</body>
</html>

有使用经验的人能看出问题所在吗？谢谢!

最佳答案

设法修复它!将其放入样式中:

<style>
    html head + body .ui-navbutton.ui-navbutton-c:hover,
    html head + body .ui-navbutton.ui-navbutton-c.ui-navbutton-hover,
    html head + body .ui-navbutton.ui-navbutton-c:active,
    html head + body .ui-navbutton.ui-navbutton-c.ui-navbutton-active {
        border-color: #a37a00;
        color: #fff !important;
    }

    html head+body button.ui-keyboard-button.ui-state-hover {
        border: 1px solid #830000 !important;
        background-color: #999999 !important;
    }
    /* Class added to indicate the virtual keyboard has navigation focus */
    .hasFocus {
        border-color: #59b4d4 !important;
    }
    .navbutton {
        line-height: 30px;
        margin: 2px;
        padding: 5px;
        border: #333 1px solid;
    }
    </style>