链接到Mottie:https://github.com/Mottie/Keyboard
我使用Mottie键盘和#34;导航"和"移动"扩展。除了"当前键"它工作正常。没有被突出显示。我可以在键盘上导航,点击进入后会显示,但我无法直观地看到选择了哪个键。
根据文档和工作示例,我有#34;样式"应该做的伎俩,但它不会改变任何东西。
我的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>
&#13;
有经验的人可以注意到错误吗?谢谢!
答案 0 :(得分:0)
管理修复它!把它改成造型:
<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>