javascript实现软键盘
2024-05-14 18:17:40
javascript实现软键盘效果
使用HBuilder工具使用html+加内部css样式简单实现 练习JavaScript编写
css样式代码
<style>* {padding: 0;margin: 0;}body {background: #fff;text-align:center;width: 500px;height: 400px;}th,td {border: 1px solid #ccc;padding: 2px 0;text-align: center;background-color: antiquewhite;}td {cursor: pointer}div {border: 1px solid #999;float: left;padding: 1px;display: none;}.num {color: blue;}</style>
java代码
<script>var htmlCode = {"&": "&",'"': "\"","<": "<",">": ">",}function test() {var input = document.getElementById("input");var e = window.event || test.caller.arguments[0];var el = e.target || e.srcElement;if(el.tagName.toLowerCase() == "td" && el.rowSpan <= 1 && el.colSpan <= 1) {var str = el.innerHTML;str = htmlCode[str] || str;input.value += str;}if(el.innerHTML == "退格") {input.value = input.value.slice(0, -1);}if(el.innerHTML == "切换大/小写") {var els = document.getElementsByTagName("td");for(var i = 0, l = els.length; i < l; i++) {var str = els[i].innerHTML;if(/^[a-z]$/.test(str)) els[i].innerHTML = str.toUpperCase();if(/^[A-Z]$/.test(str)) els[i].innerHTML = str.toLowerCase();}}if(el.innerHTML == "ENTER") {ctrKeyboard();}}function ctrKeyboard() {var el = document.getElementById("keyboard");if(el.offsetWidth > 0) el.style.display = "none";else {el.style.display = "block";sortNum();capsInit();}}function capsInit() {var els = document.getElementsByTagName("td");for(var i = 0, j = 0, l = els.length; i < l; i++) {var str = els[i].innerHTML;if(/^[A-Z]$/.test(str)) els[i].innerHTML = str.toLowerCase();}}function sortNum() {var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].sort(function() {return Math.random() > 0.5 ? 1 : -1;});var els = document.getElementsByTagName("td");for(var i = 0, j = 0, l = els.length; i < l; i++) {var str = els[i].innerHTML;if(/^\d$/.test(str)) els[i].innerHTML = arr[j++];}}</script>
<center><input id="input" readonly="readonly" style="width: 400px; height: 400px;" /><input type="button" value=" 键盘" onclick="ctrKeyboard()" /> <br> <br><div id="keyboard"><table cellspacing="1" width="480" onclick="test()"><tr><th colspan="16">键盘模拟输入密码器</th></tr><tr><td>~</td><td>!</td><td>@</td><td>#</td><td>$</td><td>%</td><td>^</td><td>&</td><td>*</td><td>(</td><td>)</td><td>_</td><td>+</td><td>|</td><td rowspan="2" width="120">退格</td></tr><tr><td>`</td><td class="num">1</td><td class="num">2</td><td class="num">3</td><td class="num">4</td><td class="num">5</td><td class="num">6</td><td class="num">7</td><td class="num">8</td><td class="num">9</td><td class="num">0</td><td>-</td><td>=</td><td>\</td></tr><tr><td>q</td><td>w</td><td>e</td><td>r</td><td>t</td><td>y</td><td>u</td><td>i</td><td>o</td><td>p</td><td>{</td><td>}</td><td>[</td><td>]</td><td colspan="2">切换大/小写</td></tr><tr><td>a</td><td>s</td><td>d</td><td>f</td><td>g</td><td>h</td><td>j</td><td>k</td><td>l</td><td>:</td><td>"</td><td>;</td><td>'</td><td colspan="3" rowspan="3">ENTER</td></tr><tr><td>z</td><td>x</td><td>c</td><td>v</td><td>b</td><td>n</td><td>m</td><td><</td><td>></td><td>?</td><td>,</td><td>.</td><td>/</td></tr></table></div></center>实现效果##
javascript实现软键盘相关推荐
- 移动端h5唤起键盘_移动端javascript拉起软键盘
先上图来镇楼 坑啊,知乎居然不支持gif,点这里看 一.文本输入 文本输入html元素 1.input标签,且type类型为text,number,search,tel,password,email, ...
- layer弹窗在IOS上，被软键盘挤到上边的解决方法
就像这种情况,经过多番请教跟尝试,找到一个能解决这个问题的方法,但可能有点笨重.就是在当前弹框里,设置offset的值,里边的值可以随意写,然后再下边给弹框追加一个样式即可. <!DOCTYPE ...
- js－移动端android浏览器中input框被软键盘遮住的问题解决方案
我遇到的问题:在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使:没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡: <sect ...
- h5底部输入框被键盘遮挡_总结几个移动端H5软键盘的大坑【实践】
转载链接:https://segmentfault.com/a/1190000022115177 1.部分机型软键盘弹起挡住原来的视图 解决方法:可以通过监听移动端软键盘弹起 Element.scro ...
- 移动端iOS中input输入框搜索框软键盘出现换行而不是搜索
iOS输入框搜索时软键盘出现换行而不是搜索,而且点击软键盘完成按钮不会执行搜索事件, 解决一,必须使用form表单提交,但是键盘出现搜索,ajax请求方法中得不到input的值, 解决,form表单上 ...
- 软键盘实例 request参数修改
软键盘实例 request参数修改 这里的键盘 里面的内容是乱序的,每次请求都会不一样的顺序. 键盘内容是一个DIV的背景图,方框是DIV边框.控制按钮直接在前台控制就行. 请求流程如下 JSP请求软 ...
- android 键盘将底部视图顶起,android 弹出软键盘将底部视图顶起问题
今天要做一个搜索功能,搜索界面采用AutoCompleteTextView做搜索条,然后下面用listview来显示搜索结果,而我的主界面是在底 部用tab做了一个主界面导航,其中有一个搜索按钮,因为 ...
- h5如何动态获取键盘高度_js获取软键盘高度
没有相关的事件来获取隐藏按钮点击,keydown/keyup事件中获取到的keyCode都是0,楚了你说的前往keyCode 13. 可以用计时器监视window.innerHeight高度改变来判断 ...
- 解决h5底部输入框在ios被软键盘顶飞 软键盘消失还下不来
好吧,其实不是顶飞,准确点说应该是h5页面fiexed定位在底部的输入框在ios软键盘弹起的时候软键盘跟输入框有时会有一段悬空的距离,无法紧贴.在安卓机子上则没有这样的情况. 解决方法是通过h5的sc ...
最新文章
- 关于返回结构体的函数
- springboot使用mybatis_使用springboot+mybatis数据库存储服务化
- 大数据集群跨多版本升级、业务0中断，只因背后有TA
- 数据库开启了闪回和归档，关闭归档日志alter database noarchivelog的时候报错：ORA-38781: cannot disable media recovery
- ‘MIX_INIT_MP3’ was not declared in this scope,这是什么情况？
- Flask初级（十）flash与前台交互post详解
- Hadoop组件启动的三种方式及配置SSH无密码登入
- HP Proliant DL360 G9使用业务网卡登录ILO管理
- 新路由3鸡血版固件_新路由3 V1.1版本 刷lean源码开源驱动2.4G无线测试（EEPROM重新调试了）...
- win10系统计算机物理地址,win10系统查看网卡的物理地址的操作方法
- HTML当前标签鼠标停留下划线和变色效果
- 计算机常用的内存是rom,手机内存和电脑内存是一样的吗？智能硬件常用的ROM和RAM详解...
- 使用while循环实现xyz+yzz=532
- AV1代码学习：av1_first_pass函数
- Ubuntu Linux 操作系统-清华大学开源软件镜像站下载
- 微信小程序用户信息解
- 魔兽世界服务器不显示角色信息,网易公告：部分服务器限制新角色创建功能
- Java中violate关键字详解（2）？真正了解violate
- 腾讯云Linux云服务器搭建网站
- MACBOOK强制退出程序的方法