- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
编辑 - 这是我拥有的:https://codepen.io/anon/pen/wZQjQy 这是原文:https://codepen.io/anon/pen/YMRLBN(不得不把它放在 codepen 上,不知何故在这里添加一个片段不会链接 css)
我基本上是复制粘贴了一个自定义的屏幕键盘,它可以完美地(大部分)工作,但是在将它放入不同的 HTML 中后,它就不再工作了。
keyboard我复制了
这是键盘,我真正做的就是用西里尔字母替换字符并删除大写字母、制表符、shift 和所有“打开”跨度,因为我真正需要的是按钮和字母,全部大写。现在,这在我之前构建的页面上运行良好,但由于我无休止的复制粘贴 Material ,该页面存在固有缺陷,并且在某些时候变得无法修复,所以我重新开始。使用更多的复制粘贴,但现在使用 Bootstrap,我构建的东西至少比我之前的烂摊子好 25%。但是当我从最后一个 HTML 文件导入屏幕键盘时,它现在不显示任何字符,基本上就是不工作。我真的不知道发生了什么。
CSS(我包含这个是因为可能文本实际上正在编写但由于凌乱的 CSS 而没有显示?)
$(function() {
var $write = $('#write'),
shift = false,
capslock = false;
$('#keyboard li').click(function() {
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}
// Delete
if ($this.hasClass('delete')) {
var html = $write.html();
$write.html(html.substr(0, html.length - 1));
return false;
}
// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";
// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();
// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');
shift = false;
}
// Add the character
$write.html($write.html() + character);
});
});
html {
width: 100%;
height: auto;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: auto;
}
.maincontainer {
background-image: url(b.png);
background-repeat: repeat-y;
background-position: right;
}
/*head*/
.nav-text {
vertical-align: middle;
color: white;
}
.row {
padding: 15px;
display: flex;
justify-content: center;
}
.back-button {
height: 100%;
}
#backer {
float: left;
width: auto;
}
.red {
background-color: darkred;
}
.header {
text-align: center;
color: white;
font-size: 25px;
float: left;
width: 90%;
}
.uk-icon {
color: white;
}
/*main*/
/* Style the tab */
.tab {
width: 100%;
overflow: hidden;
}
/* Style the buttons inside the tab */
.tab button {
width: 50%;
background-color: inherit;
float: left;
border: none;
background-color: darkred;
color: white;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
#tabone {
border-top-left-radius: 5px;
border-right: 1px solid white;
}
#tabtwo {
border-top-right-radius: 5px;
border-left: 1px solid white;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: rgb(80, 3, 3);
}
/* Create an active/current tablink class */
.tab button.active {
background-color: rgb(180, 15, 15);
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
background-color: white;
}
#London {
text-align: center;
}
#searchbutton {
background-color: darkred;
color: white;
border: 0;
border-radius: 5px;
margin-bottom: 15px;
padding-right: 20px;
}
#write {
width: 90%;
height: 300px;
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Soyombo_red.svg/300px-Soyombo_red.svg.png) no-repeat scroll 50px 40px;
background-size: 80PX;
padding-left: 50px;
border-radius: 5%;
border: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
text-align: center;
font-size: 10vh;
}
#London>.container-fluid>h3 {
margin-top: 5%;
font-size: 4vh;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
}
#keyboard li {
font-size: 30px;
display: inline-block;
margin: 0 5px 5px 0;
width: 5%;
padding: 0;
height: 70px;
line-height: 70px;
text-align: center;
background: #fff;
border: 1px solid black;
-moz-border-radius: 5px;
-webkit-border-radius: 7PX;
;
}
#keyboard .delete {
width: 120px;
}
.lastitem {
margin-right: 0;
}
.uppercase {
text-transform: uppercase;
}
.on {
display: none;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}
#container.ul {
margin: auto;
float: center;
}
#container-x {
width: 50%;
margin: auto;
}
input[type=submit] {
background: url(http://www.clker.com/cliparts/Y/3/d/w/R/r/search-icon-white-hi.png) no-repeat;
background-size: 25%;
background-position-y: 50%;
background-position-x: 10%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Payment
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.3/js/uikit-icons.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- My CSS & JS-->
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="maincontainer">
<div class="container-fluid red">
<div class="row">
<div class="col-">
<div class="back-button">
<a id="backer" class="uk-button uk-button-default" href="#"><span uk-icon="icon:arrow-left;"></span><span class="nav-text">Эхлэх</span></a>
</div>
</div>
<div class="col-xl">
<div class="header">
Тээврийн хэрэгслийн торгууль төлөх
</div>
</div>
<div class="col-">
<div class="header">
</div>
</div>
</div>
</div>
<div class="uk-container">
<img style="width: auto;" src="images/logo.png">
<div class="box">
<div class="tab">
<button uk-icon="bus" class="tablinks" id="tabone" onclick="openTab(event, 'London')"><img style="width: 8.7%; margin-right: 10px;" src="images/car.png">ТЭЭВРИЙН ХЭРЭГСЭЛ</button>
<button class="tablinks" id="tabtwo" onclick="openTab(event, 'Paris')"><img style="width: 9.3%; margin-right: 10px" src="images/passport.png">ЖОЛООНЫ ҮНЭМЛЭХ</button>
</div>
<div id="London" class="tabcontent">
<div class="container-fluid">
<h3>АВТОМАШИНЫ УЛСЫН ДУГААР</h3>
<div id="input_container">
<input type="text" id="write" maxlength="7" placeholder="UBA 0000">
</div>
</div>
<div>
<input type="submit" value="Хайх" id="searchbutton" class="uk-button uk-button-default" href="#"></input>
</div>
<div style="width:auto;margin: auto;" id="container">
<ul style="display:table; width:100%;" id="keyboard">
<li class="symbol"><span class="off">1</span></li>
<li class="symbol"><span class="off">2</span></li>
<li class="symbol"><span class="off">3</span></li>
<li class="symbol"><span class="off">4</span></li>
<li class="symbol"><span class="off">5</span></li>
<li class="symbol"><span class="off">6</span></li>
<li class="symbol"><span class="off">7</span></li>
<li class="symbol"><span class="off">8</span></li>
<li class="symbol"><span class="off">9</span></li>
<li class="symbol"><span class="off">0</span></li>
<li class="delete"><span class="delete"><img style="width:50%"
src="https://cdn3.iconfinder.com/data/icons/sympletts-part-1/128/backspace-256.png"></span></li>
<br>
<li class="letter">Ф</li>
<li class="letter">Ц</li>
<li class="letter">У</li>
<li class="letter">Ж</li>
<li class="letter">Э</li>
<li class="letter">Н</li>
<li class="letter">Г</li>
<li class="letter">Ш</li>
<li class="letter">Ү</li>
<li class="letter">З</li>
<li class="letter">К</li>
<li class="letter">Ъ</li><br>
<li class="letter">Й</li>
<li class="letter">Ы</li>
<li class="letter">Б</li>
<li class="letter">Ө</li>
<li class="letter">А</li>
<li class="letter">Х</li>
<li class="letter">Р</li>
<li class="letter">О</li>
<li class="letter">Л</li>
<li class="letter">Д</li>
<li class="letter">П</li><br>
<li class="letter">Я</li>
<li class="letter">Ч</li>
<li class="letter">Е</li>
<li class="letter">Ё</li>
<li class="letter">С</li>
<li class="letter">М</li>
<li class="letter">И</li>
<li class="letter">Т</li>
<li class="letter">Ь</li>
<li class="letter">В</li>
<li class="letter">Ю</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</div>
</div>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</div>
</div>
</div>
</body>
</html>
当我从键盘上点击一个 li 元素时,它应该调用那个 JS,让魔法发生。它什么都不做。我最好的猜测是“选项卡”在表单加载时未激活,因为唯一真正的区别是我在最后一个上使用了 Bootstrap 选项卡,但在这个上我复制了 W3 学校的选项卡。
最佳答案
将 ID 为“write”的输入区域更改为文本区域。
替换这一行:
<input type="text" required="" id="write" maxlength="7" placeholder="UBA 0000">
用这个:
<textarea id="write" rows="6" cols="60" placeholder="UBA 0000"></textarea>
Code Pen显示更改后的代码。
关于javascript - JQuery 和 CSS 屏幕键盘无法在重制 HTML 上运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55842896/
我遇到了一个问题。我正在使用 pyinstaller 将代码导出到 .exe。代码包括 tkinter、PIL 和 keyboard 模块。软件在我使用 Python 的 PC 上运行完美,而在没有
我正在尝试将 STM32F0-disco 用作 Windows PC 的键盘。正在打印的字符有问题。 下面的代码等到板载按钮被按下,然后应该打印一次这三个字符。 /* USER CODE BE
我想在单击键盘上的“完成”按钮时退出键盘。我怎样才能做到这一点?我有以下代码=> textView.returnKeyType = UIReturnKeyDone; 我有这个代码用于限制 TextVi
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我想调出一个用于输入电话号码的键盘。有没有办法在我自己的 Activity 中显示此对话框并捕获用户输入的内容。我需要能够控制用户点击调用时发生的情况。所以我很感兴趣自定义允许用户输入电话号码的 Ac
我希望软键盘位于我的布局之上,而不是在它弹出时四处移动我的布局。我该怎么做呢?我查看了 list ,但从未设置 android:windowSoftInputMode="adjustResize" 此
主题:将某些键替换为另一个键值。 例如如果我按 P,它应该是 F24。 当我尝试从 .ini 文件加载键值时, Hook 不再是全局的。它仅在 winapi 窗体处于焦点时才有效。 我的 DLL 代码
当我点击 EditText 时,是否可以用小写字母启动 android 键盘?基本上,我想要的是将 EditText 中的第一个字母小写,但也让用户可以根据需要将其变为大写...... (EditTe
我想监控 IOS 上的键盘隐藏按钮并触发一个事件。我在说: 我只想在用户按下实际按钮时进行监控。我不想要键盘隐藏时的事件。 最佳答案 用户键盘通知观察者.. 对于 swift NSNotificati
在经历了这一切之后就像认真的...... Easy way to dismiss keyboard? ...我有多个 TextFields 和一些 TextViews。有没有办法对所有文本字段进行批处
所以我想在我的应用程序中添加一个键盘,其中包含表情符号,就像 Whatsapp 或环聊一样。我怎样才能做到这一点?我想保留我的键盘,因为我只想添加标签来放置表情符号。我认为软键盘很容易支持它,但到目前
首先,我会让您知道,我在 StackOverflow 以及 Google 和 Github 上查看了很多很多不同的帖子。我已经到处寻找对我有帮助的任何。但是,似乎没有任何效果。它要么已经过时(超过 1
当按下相应的键时,我试图让我的游戏中的宇宙飞船 (PlayerShip.gif) 向左、向右、向上和向下移动。我知道我需要一个 keyboardListener 但我在弄清楚它的去向以及它是如何实际实
我正在尝试制作一个 HID USB 设备。我搜索了一下,发现键盘的输出有 8 个字节。第一个字节是修饰符,第二个字节是保留字节,其余 6 个字节是关键代码。我认为在某些情况下,例如“prtsc”,需要
我最近开始学习 Vim,在深入学习之前,我有一个问题需要回答。 使用 AZERTY 键盘,我是否应该重新映射命令和快捷方式的键以适应 QWERTY 键盘的键位置? 我之所以问这个,是因为显然在创建这些
我一直认为在使用 Dvorak 布局之前,我需要购买 Dvorak 键盘。但是我在亚马逊上找不到。仅仅是从 Qwerty 键盘上弹出键并移动它们吗? 最佳答案 为了帮助您了解键盘布局,您可以重新排列
我不敢相信我还没有找到任何关于此的文档,但我想知道如何命令键盘激活并接收来自它的输入。我可以找到在编辑文本字段时操作弹出键盘的所有示例。谢谢 最佳答案 您还可以使用 UIKeyInput 协议(pro
我有一个 UITextField,其中弹出的键盘已禁用其 Shift 键。键盘类型设置为 UIKeyboardTypeNamePhonePad,看起来应该允许大写。 如果我将键盘类型更改为“默认”但保
背景:我的表单有一个 TWebBrowser。我想用 ESC 关闭表单,但 TWebBrowser 吃掉了击键 - 所以我决定使用键盘 Hook 。 问题是表单可以同时在多个实例中打开。 无论我做什么
我需要(即客户要求)提供自定义键盘,供用户在文本字段和区域中输入文本。我已经有一些可以执行键盘操作并将测试附加到文本字段的东西,但是我想让它更通用并让它像标准的 iphone 键盘一样工作,即当用户选
我是一名优秀的程序员,十分优秀!