不能得到动画jQuery键盘突出显示所选的键

Can't get mottie jQuery keyboard to highlight chosen key

本文关键字：显示 动画 jQuery 键盘 不能      更新时间：2023-09-26

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

我使用motie键盘与"导航"answers"移动"扩展。它工作得很好，除了"当前键"没有被突出显示。我可以在键盘上导航，点击回车键就会显示出来，但我不能直观地看到哪个键被选中了。

根据文档和工作示例，将我的代码片段设置为"style"应该可以做到这一点，但它不会改变任何东西。

我的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>
相关文章：